如何让nuxtServerInit在服务器上调度操作？

Question

我有一个使用firebase的nuxt项目。 我想使用SSR并在SSR上启动和填充商店，但我无法获得下面的代码。

我正在开发一个nuxt项目我有一个插件/ firebase项目，它启动了firebase sdk。 我有一个asyncData函数可以工作。

在我的/store/index.js文件中，我导出了状态函数和操作。 在动作中我有异步nuxtServerInit，它调度传递上下文的`posts / getPosts'动作。

在我的store/index我有

export const state = () => ({})

export const actions = {
  async nuxtServerInit({ dispatch }, context) {
    await dispatch('posts/getPosts', context)
  }
}

在我的'store / posts.js`中，我有

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

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

export const actions = {
  getPosts({ commit }) {
    const postList = []
    return db
      .collection('posts')
      .where('status', '==', 'approved')
      .orderBy('CreatedAt', 'desc')
      .get()
      .then(docs => {
        docs.forEach(doc => {
          const newPost = doc.data()
          newPost.id = doc.id
          this.postList.push(newPost)
          console.log(newPost)
        })
      })
      .then(() => {
        commit('addPosts', postList)
      })
      .catch(e => console.log(e))
  }
}

在我的firebase插件中，我有

import firebase from 'firebase'

const firebaseConfig = {
  apiKey: '<<correctkey>>.',
  authDomain: '<<correctkey>>',
  databaseURL: '<<correctUrl>>',
  projectId: '<<correctid>>',
  storageBucket: '<<correctbucket>>',
  messagingSenderId: '<<correctkey>>',
  appId: '<<correctkey>>'
}

if (!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig)
}

export const db = firebase.firestore()
export const auth = firebase.auth()

这个代码，至少我认为，应该在服务器上启动我的商店并用post值填充它。 当我在vue开发人员工具中检查我的商店时，商店中没有值，尽管存在getter并且存在状态值（空数组）。 这告诉我商店已启动且模块存在，至少在客户端。

Answer 1

事实证明问题不在于我的行为，而在于突变。 这是让我工作的最终代码。

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

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

export const getters = {
  getPosts(state) {
    return state.ActivePosts
  }
}

export const mutations = {
  addPosts(state, payload) { // had to change { state } to state.
    state.ActivePosts.push(payload)
  }
}

export const actions = {
  getPosts({ commit }) {
    const postList = []
    return db
      .collection('posts')
      .where('status', '==', 'approved')
      .orderBy('CreatedAt', 'desc')
      .get()
      .then(docs => {
        docs.forEach(doc => {
          const newPost = doc.data()
          newPost.id = doc.id
          postList.push(newPost) //removed the `this.`
        })
          commit('addPosts', postList) //moved the commit to the  // moved the commit out of its own then.
      })
      .catch(e => console.log(e))
  }
}