Imagine a scenario where there is a "store" directory structured as follows:
...
store
├── auth
│ └── user.js
└── index.js
...
index.js
import Vue from 'vue';
import Vuex from 'vuex';
import {user} from './auth/user';
Vue.use(Vuex);
/* eslint-disable no-new */
const store = new Vuex.Store({
modules: {
user
},
});
export default store;
Within the user store, various constants and state variables are defined in its state property. The challenge lies in accessing these state properties internally within the store. In simpler terms, the structure of the user store file could resemble the following:
user.js
export const user = {
namespaced: true,
state: {
// An example constant assigned to user.state.constants.SOME_CONST
constants: {
SOME_CONST: 'testString'
},
someOtherStateProp: {
// Various attempts to access the above constant result in ReferenceError's
test1: this.state.constants.SOME_CONST,
test2: user.state.constants.SOME_CONST,
test3: state.constants.SOME_CONST,
test4: constants.SOME_CONST,
test5: SOME_CONST
// ... numerous other failed attempts
}
}
};
The ultimate question remains - how can one correctly reference user.state.constants.SOME_CONST from
user.state.someOtherStateProp.test1