繁体   English   中英

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

[英]Commit mutation in a different Vuex module

我得到以下结构:

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

在 mutation.js 中,我在 state.js 中设置了 state 的日期,例如:

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

如何使用 state.js 的突变访问 yield.js 的 PRdate state?


编辑更多信息:

当组件安装时,我正在设置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)
  }
}

您可以从另一个模块更改 Vuex 模块的 state,但必须通过action来完成。 该动作可以调用另一个模块中的突变。 所以首先,在你的产量模块中创建一个突变:

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

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

{ root: true }

如果您的模块是命名空间的,第一个参数将是mutationNamemoduleName/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')

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM