Как мне получить nuxtServerInit для отправки действия на Сервер?

Question

У меня есть проект nuxt, использующий firebase. Я хочу использовать SSR, инициировать и заполнять хранилище в SSR, но не могу заставить работать приведенный ниже код.

Я работаю над пустым проектом. У меня есть проект плагина / firebase, который запускает firebase sdk. У меня есть функция asyncData, которая работает.

в моем файле /store/index.js я экспортирую функцию состояния и действия. В действиях у меня есть async 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 Developer Tools, в нем нет значений, хотя геттер присутствует и значения состояния (пустой массив) присутствуют. Это говорит мне, что хранилище инициировано и модуль присутствует, по крайней мере, на стороне клиента.

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