Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Vuex: Access State From Another Module

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


from an action :

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

  },

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

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.