javascript - 在不同的 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;
  }
}

现在您可以使用分析模块中的操作来提交该突变。将第三个参数传递给 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')