Question

我正在尝试将来自Firebase的数组对象呈现为主页上的卡片（例如Instagram提要）。在我的App.vue上，我有一个create（）生命周期钩子来获取我的数据，然后调度将使用突变来设置状态的操作。

在我的Card组件内的另一个created（）挂钩中，我抓住状态并将其用于v-for中。

Vue工具中正在发生什么，我可以看到状态已正确添加，当我在组件中使用v-for时，它应该出现在我的主页上。奇怪的是，如果我稍等片刻而不更新页面，我的物品就会出现。如果刷新页面，它们将再次消失。

我尝试在卡组件中使用settimeout（）来查看在created（）挂钩中等待是否可行，但没有成功。这是我在app.vue中使用created（）的地方

    export default {
  name: 'app',
  data() {
    return {
      cards: []
    }
  },
  components: {
    Card
  },
  created() {
    db.collection('Assets').get()
    .then((snapshot) => {
      snapshot.forEach( (doc) => {
        this.cards.push(doc.data());

        this.$store.dispatch('actionCards', this.cards)
      })
    })
  }
}

这是我的store.js

const Store = new Vuex.Store({
     state: {
        loadedCards:[],
        user: null,
        username: null,
        token: null
     },
     mutations: {
    setCards(state, cards) {
      state.loadedCards = cards;
    }
       actions: {
       actionCards(vuexContext, cards) {
        vuexContext.commit('setCards', cards)
     }

获得州的我的卡组件代码。

 export default {
name: 'card',
data() {
    return {
        cards: []
    }
}, 
created() {
    this.$store.state.loadedCards.forEach( (doc) => {

           this.cards.push(doc) 


     })
 }

}

我希望我的卡能立即呈现。

创建的挂钩获取数据，然后更新Vuex状态，但DOM中没有任何内容

0 个答案: