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