Vuex:来自另一个模块的访问状态


107

我要访问state.sessioninstance.jsrecords_view.js。这是如何完成的?

商店/模块/instance.js

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

const getters = {
  sessionGetter: state => state.session
};

商店/模块/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
    );
  }
};

这是为了增加一些上下文。

商店/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
  }
});

Answers:


146

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

let session = context.rootState.instance.session;

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


16
只需添加,您还可以执行诸如context.rootGetters之类的操作,如果您想直接访问getter而不是状态。
布拉德,

虽然正确,但是上面的答案是不完整的。下面的帖子说明了如何将上面引用的上下文传递到操作中。
路加(Luke F.)

45

从动作:

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

  },

4
尽管这可能会回答问题,但是最好对代码为何与引用一起使用进行解释。
蒂姆·哈奇森

对于初学者来说,以上语法令人困惑。最好将上下文作为参数传递,然后通过它访问commit和rootstate。速记令人迷惑。这更容易理解:'contacts:update'(context){console.log('rootState',context.rootState.users.form)...... context.commit .......},
Luke F.20年

1
@LukeF。-这是Vuex文档中使用的标准语法,只有一次,也是在其他所有地方使用的方式。查看过动作文档的任何人都将在那里看到它,并在那里看到对销毁的解释。

确实。同时,如果文档清楚的话,我们当中很多人就不会在这里。:)
卢克(Luke F.)

与Vue文档提供的引用相比,这也是解构的参考/说明,它更易于访问: courses.bekwam.net/public_tutorials/…
Luke F.

8

对我来说,我有vuex模块,但需要进行更改以更新其他文件中的STATE。能够通过添加此来完成此操作

即使在模块中,您也可以通过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;
 }
}

有趣。这确实有效。我想知道这是否是我们可以依靠的有据可查/受支持的行为,或者仅仅是一个不错的hack。目前,我正在使用此解决方案,因为它不会发出警告并且一切正常。谢谢!
namero999

您也可以只使用context.commit('user/change_amount', new_amount, {root: true})
Kris

2

就我而言,这就是它的工作方式。

在ModuleA.js文件中:

Module A:  
export const state = {
    parameterInA: 'A'
 }
export const action = {
    showParameterB() {
    console.log("Parameter B is: " + this.state.B. parameterInB)
}

在文件ModuleB中:

export const state = {
    parameterInB: 'B'
 }

export const action = {
    showParameterA() {
    console.log("Parameter A is: " + this.state.A.parameterInA)
}  

您需要在index.js中将root导入ModuleA&B:

import * as A from 'ModuleA.js'  
import * as B from 'ModuleB.js'

这样,状态参数可以在子模块中交叉引用。


-3

您需要session像下面这样在状态中定义,才能在getter中访问它:

const state = {
  session: ''
}

您必须编写一个mutation,从您的操作中将其调用以设置此状态值。


我有你在这里提到的一切。我可以从组件内部访问会话,但是我不确定如何从另一个Vuex模块(即records_view.js)内部访问会话。
Donnie

3
@Donnie trycontext.rootState.instance.session
Saurabh
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.