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

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

使用更多信息编辑：

当组件被挂载时，我正在设置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模块的状态，但它必须通过动作完成。这个动作可以调用另一个模块中的突变。首先，在产率模块中创建一个突变：

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')