[英]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.