将 firebase 数据存储在 localstorage 中，然后推送到 vue data()

Question

我不确定我是否走在正确的轨道上，但我正在尝试将一些 firebase 数据存储到我的 created() 挂钩上的 localstorage 中，然后将其推送到我的 vue data() 以便我可以渲染它在我的应用程序中。但是我的本地存储没有正确设置来自 firebase 的数据，所以当我在渲染中引用它时，我的文章属性为空:(

我的文章[]中有一些示例文章来显示来自 firebase 的数据结构 *当没有从本地存储中引用时，数据确实可以正确呈现

也许有人可以为我指明正确的方向，我认为问题在于我调用将数据设置为本地存储

这是我的组件

<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>

Answer 1

对ref.get() 的调用似乎返回了Promise，因此它是一个异步 操作，不会在同一个周期内完成。

换句话说，当您设置值时，对then 的回调没有运行。要解决您的问题，您也应该将相关行移到该回调中。