在不同的 Vuex 模块中提交突变

Question

我得到了以下结构：

store.js
|
|-- yields.js
|
|--analysis (sub-folder)
          |
          |
          ---actions.js
          |
          ---mutations.js
          |
          ---state.js

在 mutations.js 中，我在 state.js 中设置了一个状态的日期，例如：

stateFetchParamsStart: (state, input) => {
  state.fetchParams.start = input;
  // Want to change yields.PRdate too
  //state.yields.PRdate = input;
}

如何使用 state.js 的突变访问 yields.js 的 PRdate 状态？

编辑更多信息：

当组件安装时，我正在设置 PRdate 的初始值：

mounted(){
  ...
  this.fetchPRData(this.pvSystem.system_id); // makes an axios call
}

我还设置了计算属性询问日期：

getPrDate: {
  get(){
    return this.$store.state.yields.PRdate;
  }
}

现在，当我点击日期选择器时，我希望更改日期（也在 v-model 上计算属性）：

start: {
  get() {
    return this.$store.state.analysis.fetchParams.start
  },
  set(value) {
    this.$store.commit('stateFetchParamsStart', value)
  }
}

Answer 1

您可以从另一个模块更改 Vuex 模块的状态，但必须通过 action 来完成。该操作可以调用另一个模块中的突变。所以首先，在你的 yields 模块中创建一个突变：

mutations: {
  statePRdate(state, input) {
    state.PRdate = input;
  }
}

现在您可以使用 analysis 模块中的操作来提交该变更。将第三个参数传递给 commit 调用：

{ root: true }

第一个参数将是 mutationName 或 moduleName/mutationName 如果您的模块是命名空间的。这是下面的新操作，它在自己的模块中调用一个突变，在另一个模块中调用一个突变：

actions: {
  analysisAction({ commit }, input) {
    commit('stateFetchParamsStart', input);         // Commit in this module
    commit('statePRdate', input, { root: true });   // Commit in another module
  }
}

发起如下操作：

this.$store.dispatch('analysisAction', 'input')

命名空间模块

如果您的模块是命名空间的，那么您将对提交和操作都使用命名空间语法：

commit('yields/statePRdate', input, { root: true })

this.$store.dispatch('analysis/analysisAction', 'input')

在不同的 Vuex 模块中提交突变

Commit mutation in a different Vuex module

javascript

vue.js

vue-component

vuex

vuex-modules

命名空间模块