Nuxt.js Vuex 模块未按预期工作答案

【问题标题】：Nuxt.js Vuex module not working as expectedNuxt.js Vuex 模块未按预期工作
【发布时间】：2020-05-31 00:46:05
【问题描述】：

我在模块中使用 Nuxt 的 Vuex 时遇到问题。

原来state被声明并出现在Vuex中，动作被触发，但是mutation改变了state实例，但是不提交改变甚至不触发事件，因为它没有出现在 Vuex 开发工具控制台中，位于 Vuex 模块代码下方。

注意：console.log() 都打印状态，第一个是空的，因为它是声明的，第二个是更改的状态，但更改并没有真正反映在 Vuex 中。

export const strict = false
export const state = () => ({
  address: {}
})

export const mutations = {
  setShopAddress(state, address) {
    console.log(state)
    state.address = address
    console.log(state)
  }
}

export const actions = {
  getAddress({
    commit
  }) {
    this.$axios
      .get('/general/address')
      .then((response) => {
        commit('setShopAddress', response.data)
      })
      .catch((e) => console.error(e))
  },
  setAddress(vuexContext, address) {
    vuexContext.commit('setShopAddress', address)
  }
}

export const getters = {
  getShopAddress(state) {
    return state.address
  }
}

【问题讨论】：

标签： vue.js vuex nuxt.js vuex-modules

【解决方案1】：

经过数小时后，感谢 Telegram 上的 Nuxt 小组，我能够找到解决方案，我只需要在 nuxtServerInit 上放置一个 async 并在号召性用语上等待。

代码如下：

async nuxtServerInit({ dispatch }) {
    await dispatch('module/action')
},

希望我的回答能帮助更多人

【讨论】：