vue.js - Nuxt.js Vuex 模块未按预期工作

Question

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

事实证明，state正在声明并出现在 Vuex 中，触发了操作，但mutation更改了state实例，但不提交更改，甚至不触发事件，因为它没有出现在 Vuex devtools 控制台中，如下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.jsvuexnuxt.jsvuex-modules

Answer 1

几个小时后，多亏了 Telegram 上的一组 Nuxt，我才能够找到解决方案，我只需要在 nuxtServerInit 上放置一个 async 并在号召性用语上等待。

下面的代码：

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

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