Мутация Nuxt Vuex работает, но не обновляет состояние

Question

Я пытаюсь получить некоторые данные с помощью nuxtServerInit и сохранить их в состоянии

store / index. js

import { fireDb } from '~/plugins/firebase'

export const state = () => ({
  posts: []
})

export const mutations = {
  addPosts (state, post) {
    state.posts.push(post)
    console.log('mutation =>', state.posts.length)
  }
}

export const actions = {
  nuxtServerInit (state, ctx) {
    fireDb.collection('posts').orderBy('timestamp', 'desc').limit(3).get().then((snapshot) => {
      snapshot.forEach((doc) => {
        state.commit('addPosts', doc.data())
      })
      console.log('action => ', state.posts.length)
    })
  }
}

при запуске этого кода вывод консоли равен

mutation => 1                                                                                                                      
mutation => 2                                                                                                                      
mutation => 3                                                                                                                      

ERROR  Cannot read property 'length' of undefined    

И vue инструменты разработчика также не показывают, что внутри сообщений есть данные [].
Что мне здесь не хватает?

Answer 1

Похоже, что nuxtServerInit отправляется как действие с контекстом Nuxt . Будучи действием, первым аргументом будет контекст Vuex .

Контекст Vuex предоставляет несколько свойств, включая state и commit.

Документы также говорят:

Примечание. Асинхронные nuxtServerInit действия должны возвращать Promise или использовать асинхронное / ожидающее использование, чтобы позволить nuxt серверу ожидать их.

Вы можете изменить свой код на:

async nuxtServerInit({state, commit}, ctx) {
    let snapshot = await fireDb.collection('posts').orderBy('timestamp', 'desc').limit(3).get();
    snapshot.forEach((doc) => {
        commit('addPosts', doc.data())
    });
    console.log('action => ', state.posts.length)
}