Vuex: Access State From Another Module

Question

I want to access state.session in instance.js from records_view.js. How is this accomplished?

store/modules/instance.js

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

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

store/modules/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
    );
  }
};

This is for a little bit of added context.

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

score 190 · Accepted Answer · answered Dec 28 '16 at 18:54

190

state references local state and rootState should be used when accessing the state of other modules.

let session = context.rootState.instance.session;

Documentation: https://vuex.vuejs.org/en/modules.html

answered Dec 28 '16 at 18:54

Donnie

6,229
8
35
53

22

just to add you can also do things like context.rootGetters if you want to access a getter rather than the state directly. – Brad May 11 '18 at 10:49
1

While correct the above answer is incomplete.The below post illustrates how to pass the context that is referenced above into the action. – Luke Oct 10 '20 at 16:23

score 78 · Answer 2 · answered Jun 07 '17 at 17:17

78

from an action :

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

  },

answered Jun 07 '17 at 17:17

Thibault Van Campenhoudt

781
6
3

7

Although this may answer the question, it is always good to provide an explanation of why the code works with references. – Tim Hutchison Jun 07 '17 at 17:53
For beginners the above syntax is confusing. Better to pass in the context as an argument and then access commit and rootstate through it. The shorthand is disorienting. This is easier to understand: 'contacts:update' ( context) { console.log('rootState', context.rootState.users.form) ...... context.commit....... }, – Luke Oct 10 '20 at 16:20
3

@LukeF. - This is the standard syntax used in the [Vuex documentation](https://vuex.vuejs.org/) all but one time, and also the way it is used just about everywhere else. Anyone who has looked at the action [docs](https://vuex.vuejs.org/guide/actions.html) will have seen it there along with the explanation of destructuring given there. – Dan Oct 11 '20 at 04:32
Indeed. At the same time many of us wouldn't be here if the documentation was clear. :) – Luke Oct 12 '20 at 14:55
Here also is a reference/explanation of destructuring that is more accessible than the cite that the Vue documentation provides: https://courses.bekwam.net/public_tutorials/bkcourse_vuejs_destructuring.html . – Luke Oct 12 '20 at 20:40

Dan Kaiser · Answer 3 · 2019-08-07T17:33:45.557

19

For me I had vuex modules, but needed a mutation to update STATE in a different file. Was able to accomplish this by adding THIS

Even in the module you can see what global state you have access to via 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;
 }
}

edited Aug 07 '19 at 17:33

answered Aug 07 '19 at 17:27

Dan Kaiser

991
8
7

Interesting. This indeed works. I wonder if this is a documented/supported behavior we can rely on, or just a nice hack. For the time being, I'm using this solution since it doesn't raise warnings and things behave correctly. Thanks! – namero999 Dec 05 '20 at 20:40
2

You can also just use `context.commit('user/change_amount', new_amount, {root: true})` – Kris Jan 07 '21 at 09:49

score 4 · Answer 4 · edited Jan 31 '21 at 00:43

In my case, this is how it worked for me.

In file ModuleA.js:

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

In file ModuleB:

export const state = {
    parameterInB: 'B'
 }

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

You will need to import ModuleA & B in the index.js for the root:

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

This way, state parameter can be cross-referenced in sub modules.

score 4 · Answer 5 · answered Jan 22 '21 at 23:51

4

this.$store.state.instance.session

where "instance" is the module name and "session" is the Vuex state variable you're trying to access.

answered Jan 22 '21 at 23:51

HyperActive

1,129
12
12

score 4 · Answer 6 · answered Sep 18 '21 at 10:52

Say you have two modules: ModuleA & ModuleB.

If you want to access ModuleA's state from ModuleB, you could do the following:

// inside ModuleB (where there is stateA in ModuleA)
getters: {
        getStateA(state, _, rootState) {
            return rootState.ModuleA.stateA;
        },
    },

score 0 · Answer 7 · answered Aug 23 '22 at 07:12

0

you can use rootGetters or rootState

in actions, contexts has rootGetters or rootState.

contexts.rootState.instance.session;
contexts.rootGetters["instance/session"];

answered Aug 23 '22 at 07:12

Natsuki

11
1
1

score -5 · Answer 8 · answered Dec 28 '16 at 17:07

-5

You need to define session in your state like following, to access it in your getters:

const state = {
  session: ''
}

You have to write a mutation, which will be called from your actions to set this state value.

answered Dec 28 '16 at 17:07

Saurabh

71,488
40
181
244

I have everything you've mentioned here. I can access the session from within a component, but I'm not sure how to access the session from inside another Vuex module (i.e. records_view.js). – Donnie Dec 28 '16 at 17:34
3

@Donnie try `context.rootState.instance.session` – Saurabh Dec 30 '16 at 02:50

Vuex: Access State From Another Module

8 Answers8

Linked