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

现在，当我尝试访问组件文件中的autoken模块时，无法访问它。我正在这样做。$ store.state.authToken.getters.isAuthenticated

但是尝试使用它时出现以下错误。

已挂接的钩子中出现错误：“ TypeError：无法读取属性 'isAuthenticated'未定义”

Answer 1

这是因为您忘记了将对象导出到文件src/store/modules/authToken.js中。由于未导出任何内容，因此您为商店提供的authToken变量将为undefined。

只需将其添加到文件末尾即可：

export default authToken;

Vue-无法在组件中访问存储模块

1 个答案: