I've been attempting to import a vuex store into a custom JavaScript module within my Vuex application. Despite trying various methods, the build shows 100% compliance each time. However, I keep encountering the following error in the browser console, with nothing being loaded:
Uncaught TypeError: Cannot read property 'getters' of undefined
I have experimented with different ways of importing it, all resulting in the same error response.
import store from '../store'
import { store } from '../store'
import store from '../store/index.js'
Additionally, I've attempted to access the store using different approaches such as:
let tokens = store.state.user.tokens
let tokens = store.getters['user/getTokens']
The structure of my store file is as follows:
import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
Vue.use(Vuex)
const store = new Vuex.Store({
modules: {
user
}
})
export default store
Below is the code snippet for the store/modules/user.js file..
export default {
namespaced: true,
state: {
user: {},
active: false,
tokens: {},
},
mutations: {
updateUser(state, user) {
state.user = user.details
state.active = true
state.tokens = user.tokens
},
},
actions: {
async updateUser({ commit }) {
try {
const res = await axios().get('/user/details') //axios details omitted here
commit('updateUser', res.data.user)
} catch (error) {
console.log(error)
}
},
},
}
I'm puzzled by this issue. While I have successfully implemented the process in another project, it seems to be failing in this particular instance. The application does not load at all and only returns this error. Any assistance on this matter would be greatly appreciated.