CODEWITHSUNDEEP
javascriptvue.jsfrontendvuex
Hamza
Hamza

Reputation: 71

Vue - Modules of store not accessible in component

My src/store/modules/authToken.js file is like this:

const authToken = {
    state: { 
        token: localStorage.getItem('user-token') || '',
        status: '',
    },
    mutations: {
      authSuccess(state, token) {
          console.log('hellllo')
          state.token = token
          state.status = 'success'
      },

      authFail(state) {
          state.status = 'error'
      }
    },

    getters: {
      isAuthenticated: state => {
          return !!state.token
      },
      authStatus: state => {
          return state.status
      }
    }
}

My src/store/store.js file is like this:

import Vue from 'vue'
import Vuex from 'vuex'
import authToken from './modules/authtoken'

Vue.use(Vuex)
Vue.config.devtools = true
export const store = new Vuex.Store({
    modules: {
        authToken
    }
})

In my main.js file, I am using the store as below:

import { store } from './store/store'
new Vue({
  render: h => h(App),
  store,
  router,
}).$mount('#app')

Now, when I try to access the autoken module in a component file, I am unable to access it. I'm doing this.$store.state.authToken.getters.isAuthenticated

but I'm getting the following error when I try to use it.

Error in mounted hook: "TypeError: Cannot read property 'isAuthenticated' of undefined"

Upvotes: 0

Views: 322

Answers (1)

Seblor
Seblor

Reputation: 7136

This is because you forgot to export your object in your file src/store/modules/authToken.js. Since nothing is exported, the authToken variable you feed the store will be undefined.

Just add this at the end of your file :

export default authToken;

Upvotes: 1

Related Questions