Vue - Модули магазина не доступны в компоненте

Question

Мой src / store / modules / authToken.js файл выглядит так:

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

Мой файл src / store / store.js выглядит так:

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

В моем файле main.js я использую хранилище, как показано ниже:

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

Теперь, когда я пытаюсь получить доступ к модулю автокена в файле компонента, я не могу получить к нему доступ.,Я делаю это. $ Store.state.authToken.getters.isAuthenticated

, но при попытке его использовать я получаю следующую ошибку:

Ошибка в подключенном хуке: «TypeError: Не удается прочитать свойство isAuthenticated из undefined»

Answer 1

Это потому, что вы забыли экспортировать свой объект в ваш файл src/store/modules/authToken.js.Поскольку ничего не экспортируется, переменная authToken, которую вы передаете в хранилище, будет undefined.

Просто добавьте это в конец вашего файла:

export default authToken;