Vuex: Access State From Another Module

javascript vue.js vuex

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

Donnie

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

just to add you can also do things like context.rootGetters if you want to access a getter rather than the state directly.

While correct the above answer is incomplete.The below post illustrates how to pass the context that is referenced above into the action.

Thibault Van Campenhoudt

from an action :

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

  },

Although this may answer the question, it is always good to provide an explanation of why the code works with references.

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

@LukeF. - This is the standard syntax used in the Vuex documentation all but one time, and also the way it is used just about everywhere else. Anyone who has looked at the action docs will have seen it there along with the explanation of destructuring given there.

Indeed. At the same time many of us wouldn't be here if the documentation was clear. :)

Here also is a reference/explanation of destructuring that is more accessible than the cite that the Vue documentation provides: courses.bekwam.net/public_tutorials/… .

Dan Kaiser

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

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!

You can also just use context.commit('user/change_amount', new_amount, {root: true})

Community

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.

HyperActive

this.$store.state.instance.session

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

Mimina

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

Saurabh

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.

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 try context.rootState.instance.session

Vuex: Access State From Another Module

Follow WeChat

Want to stay one step ahead of the latest teleworks?

相似问题

Platform

Support

Contact US