Vuex:从另一个模块访问状态

Don*_*nie 59 javascript vue.js vuex

我想访问state.sessioninstance.js距离records_view.js.这是如何完成的?

存储/模块/ instance.js

const state = {
  // This is what I want to access in records_view.js
  session: {}
};

const getters = {
  sessionGetter: state => state.session
};
Run Code Online (Sandbox Code Playgroud)

存储/模块/ records_view.js

const actions = {
  getSettingsAction (context, props) {
    // This is how I'm trying to access session, which doesn't work
    let session = context.state.instance.session;

    Api(
      context,
      {
        noun: props.noun,
        verb: 'GetRecordsViewSettings',
        orgUnitKey: _.has(session, 'orgunit.key') ? session.orgunit.key : '',
        data: {}
      },
      props.callback
    );
  }
};
Run Code Online (Sandbox Code Playgroud)

这是为了增加一些背景.

存储/ index.js

import Vue from 'vue';
import Vuex from 'vuex';
import * as actions from './actions';
import * as getters from './getters';
import * as types from './mutation-types';

import instance from './modules/instance';
import recordsView from './modules/records_view';

Vue.use(Vuex);

export default new Vuex.Store({
  state,
  actions,
  getters,
  mutations,
  modules: {
    instance,
    recordsView
  }
});
Run Code Online (Sandbox Code Playgroud)

Don*_*nie 85

state引用本地状态,rootState应该在访问其他模块的状态时使用.

let session = context.rootState.instance.session;
Run Code Online (Sandbox Code Playgroud)

文档:https://vuex.vuejs.org/en/modules.html

  • 如果要访问getter而不是直接访问状态,则只需添加就可以执行context.rootGetters之类的操作。 (6认同)

小智 18

从动作:

'contacts:update' ({ commit, rootState }) {
    console.log('rootState', rootState.users.form)
    ......

  },
Run Code Online (Sandbox Code Playgroud)

  • 尽管这可能会回答问题,但是最好解释一下为什么代码可以使用引用。 (2认同)
  • @卢克F。- 这是 [Vuex 文档](https://vuex.vuejs.org/) 中使用的标准语法,几乎一次,也是它在其他地方使用的方式。任何看过该操作[文档](https://vuex.vuejs.org/guide/actions.html)的人都会在那里看到它以及那里给出的解构解释。 (2认同)

Dan*_*ser 13

对我来说,我有 vuex 模块,但需要一个突变来更新不同文件中的 STATE。能够通过添加 THIS 来实现这一点

即使在模块中,您也可以通过 console.log(this.state) 查看您可以访问的全局状态

const mutations = {
MuteChangeAmt(state, payload) {
//From user module; Need THIS keyword to access global state
this.state.user.payees.amount = payload.changedAmt;
 }
}
Run Code Online (Sandbox Code Playgroud)

  • 您也可以只使用 `context.commit('user/change_amount', new_amount, {root: true})` (2认同)