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

Answer 1

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

Answer 2

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.

Answer 3

this.$store.state.instance.session

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

Answer 4

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;
        },
    },

Answer 5

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.

Answer 6

you can use rootGetters or rootState

in actions, contexts has rootGetters or rootState.

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

Answer 7

from an action :

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

  },

Answer 8

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;
 }
}