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

Question

我得到了以下结构：

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

在 mutation.js 中，我在 state.js 中设置状态的日期，例如：

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

如何通过 state.js 的突变访问 yield.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')