为什么我的 Vuex 状态在 nuxtServerInit 提交后没有改变？

Question

我一直在使用 nuxtServerInit 从我的 contenful CMS 获取数据并提交变更以将数据添加到类别状态对象。然而，类别一直显示为空，即使我尝试在组件上呈现它也是如此。

我可以console.log突变函数中的数据，看到数据，为什么没有被推入类别状态？

import Vuex from 'vuex'
import {createClient} from '~/plugins/contentful.js' //contentful plugin function

const client = createClient()
const createStore = () => {
  return new Vuex.Store({
    state: {
      categories: {}
    },
    mutations: {
      addCategories(state, data) {
        state.categories += data.items
      }
    },
    actions: {
      async nuxtServerInit(context) {
        client.getEntries({
            content_type: 'category' //fetch everything with the content type set to category
          })
          .then(response => context.commit('addCategories', response))
          .catch(console.error)
      }
    },
  })
}

export default createStore

Answer 1

import Vue from 'vue'
import Vuex from 'vuex'

import { createClient } from '~/plugins/contentful'

const client = createClient()

export default = () => new Vuex.Store({
  state: {
    categories: {}
  },

  mutations: {
    addCategories (state, data) {
      Vue.$set(state, 'categories', [...data.items, ...state.catagories])
    },
  },

  actions: {
    async nuxtServerInit ({ commit }) {    
      let response

      try {
        response = await client.getEntries({ content_type: 'category' })
      }
      catch (error) {
        console.log(error)
      }

      context.commit('addCategories', response)
    },
})

为什么我的 Vuex 状态在 nuxtServerInit 提交后没有改变？

Why is my Vuex state not changing after nuxtServerInit commit?

javascript

vue.js

contentful

vuex

nuxt.js