[英]storing firebase data in localstorage then pushing to vue data()
我不確定我是否走在正確的軌道上,但我正在嘗試將一些 firebase 數據存儲到我的 created() 掛鈎上的 localstorage 中,然后將其推送到我的 vue data() 以便我可以在我的應用程序。 但是我的 localstorage 沒有正確設置 firebase 中的數據,所以當我在渲染中引用它時,我的文章屬性為空:(
我的文章[]中有一些示例文章來顯示來自 firebase 的數據的結構 *當未從 localstorage 引用時,數據確實正確呈現
也許有人可以為我指明正確的方向,我認為問題出在我將數據設置為本地存儲的調用上
這是我的組件
<template> </template>
<script>
const fb = require('../../fireconfig.js')
export default {
name: 'Home',
data:function() {
return{
articles: [
{
title: 'modern web app security',
body: 'some content here about web app security',
image: 'dd',
tags: ['cyber security','web apps', 'web development']
},
{
title: 'intro to ArcGIS',
body: 'an article to show users how to do GIS stuff',
image: 'dwwd',
tags: ['arcgis','node js','gps services']
},
{
title: 'Vue.js injecting props',
body: 'this is how to inject vue props into a component',
image: 'dwwd',
tags: ['vue','props','components','web development','web apps'] //remember to make tags from db into an array by splitting at ','
}
],
categories:['web development', 'arcgis','cyber security','partnerships'], //these don't come from the db
search: '',
tagList: [],
pages: null,
drawing: swiggle,
mainlogo: slush,
tags: tagsThumb,
me: mepic,
}
},
props: {
post: Object
},
created(){
var dataArray = []
if(localStorage.getItem('data').length === 0){
console.log('initial local store', localStorage.getItem('data'))
let ref = fb.db.collection('articles')
ref.get()
.then(snapshot => {
if (snapshot.empty) {
console.log('No matching documents.');
return;
}
snapshot.forEach(doc => { //this works for each doc
console.log(doc.id, '=>', doc.data());
let obj = {
title: doc.data().title,
body: doc.data().body,
image: doc.data().image,
tags: doc.data().tags.split(",")
}
dataArray.push(obj)
})
})
.then((dataArray)=>{
console.log('heres the data array to set in the local store',dataArray)
localStorage.setItem('data', JSON.stringify(dataArray));
console.log(localStorage)
})
.then(()=>{
this.articles = JSON.parse(localStorage.getItem('data')) //push all data to this.articles
console.log('checking value of this.articles',this.articles)
})
.catch(err => {
console.log('Error getting documents', err);
});
}else{
console.log('local store', localStorage)
if(JSON.parse(localStorage.getItem('data').length !== undefined)){
this.articles = JSON.parse(localStorage.getItem('data'))
console.log('final articles',this.articles)
}
}
},
methods:{
searchResultsByCat(val){
let result = []
for(let i = 0; i < this.articles.length; i++){
for(let j = 0; j < this.articles[i].tags.length; j++){
if (this.articles[i].tags[j].includes(val)){
result.push(this.articles[i])
}
}
}
this.$router.push({name: 'Search', params: {data: result, search: val} })
},
gotoArticle(article){
this.$router.push({name: 'Article', params: {data: article} })
}
}
}
</script>
對ref.get()
的調用似乎返回了Promise
,因此它是一個異步操作,不會在同一個周期內完成。
換句話說,當你設置你的值then
,回調沒有運行。 要解決您的問題,您也應該將相關行移到該回調中。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.