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

Question

我尝试了门户网站上提到的许多东西，但似乎没有任何东西对我有用，所以在这里发布一些解决方法。

我的Nuxtjs 应用程序文件夹store\modules 中有两个模块：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。