Блог

Я пытаюсь, чтобы мой объект из массивов, поступающих из firebase, отображался в виде карточек на моей главной странице (например, Instagram feed). в моем App.vue у меня есть хук жизненного цикла create (), который получает мои данные, а затем отправляет действие, которое будет использовать мутацию для установки состояния.

В другом хуке created() в моем компоненте Card я получаю состояние и использую его в v-for.

То, что происходит в Vue tools, я вижу, что состояние было добавлено правильно, и когда я использую v-for в моем компоненте, оно должно появиться на моей главной странице. Странно то, что если я подожду некоторое время без обновления страницы, мои элементы появятся. Если я обновлю свою страницу, они снова исчезнут.

Я пытался использовать settimeout () в моем компоненте card, чтобы посмотреть, сработает ли ожидание в ху created(), но это не сработало. Вот где я использую created() в моем приложении.vue

     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) 


     })
 }
  

}

Я надеюсь, что моя карта будет отображаться сразу.