Nuxt Vuex 突变运行但不更新状态

Question

我正在尝试通过 nuxtServerInit 获取一些数据并将其保存在 state 中

存储/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 context 的操作分派的。作为一个动作，第一个参数将是 Vuex context。

Vuex 上下文公开了几个属性，包括 state 和 commit。

docs 也说：

注意：异步 nuxtServerInit 操作必须返回 Promise 或利用 async/await 以允许 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)
}