在 Nuxt 中，如何改变一个模块中的 Vuex 状态？

Question

我尝试了门户网站上提到的许多方法，但似乎对我没有任何作用，所以在此处发帖寻求解决方法。

我的 Nuxtjs 应用程序文件夹 store\modules 中有 2 个模块：ModuleA 和 ModuleB。对于 ModuleB 中的一些验证，我想从 ModuleA 访问 state，但由于某种原因，它失败了。

我尝试了 rootScope、import 等，但它对我不起作用。

我的state/modules/ModuleA.js:

export const state = () => ({
  eventType: 'MyEvent',
})

export const mutations = {
  eventTypePopulator (state, event) {
    state.eventType = event
  },
}

我的state/modules/ModuleB.js:

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

export const mutations = {
  jsonPreparation ({state, rootState}, payload) {
    console.log(rootState.eventType)
    // console.log($store.state.ModuleA.eventType)
  }
}

我尝试将 ModuleA 导入 ModuleB 并使用它，但这对我也不起作用。有人可以帮助我如何在 Nuxtjs/Vuejs

中从另一个 Module 中的一个 Module 访问 state

Answer 1

如 API reference 所示，rootState 在 actions 和 getters 中可用。
它没有找到任何将它直接用于mutation.

的方法

同时，这可以通过将它作为参数传递给 mutation 来实现，就像这样

ModuleB.js

const mutations = {
  NICE_TASTY_MUTATION: (_state, { rootState, payload }) => {
    // _state is not used here because it's moduleB's local state
    rootState['moduleA'].eventType = payload
  },
}

const actions = {
  async myCoolAction({ commit, rootState }, { ...}) {
    commit('NICE_TASTY_MUTATION', {
      rootState,
      payload: 'some-stuff'
    })
  }
}

这可以在 .vue 文件中调用，类似这样

methods: {
  ...mapActions('ModuleB', ['myCoolAction']),
}

...
await this.myCoolAction()

PS：IMO 的惯例是将文件命名为 module_b.js.

在 Nuxt 中，如何改变一个模块中的 Vuex 状态？

In Nuxt, how to mutate a Vuex state in one module from the other?

vue.js

nuxt.js

vuex

store

vuex-modules