状态未在 vue 中定义

Question

大家好，我遵循的一切都没有提供 google，但是 none 这些工作我是 vuex 3.0.1 和我代码下面的 vue 2.5 的新手

import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'
import store from './store'

Vue.prototype.$http = axios;


 var VueResource = require('vue-resource');
 Vue.use(VueResource);


   router.beforeEach((to, from, next) => {
     console.log(this.$store.state.authUser)// this is not working
      if (to.matched.some(record => record.meta.requiresAuth) && 
        (!this.$store.state.authUser || 
  this.$store.state.authUser === 'null')){
  const authUser = localStorage.getItem('authUser')
   console.log('here log');
   next({ path: '/', })

 }else{
   console.log('bhar else redirect');
  next()  
 }

});
 new Vue({
   el: '#app',
    router,
    store,
   template: '<App/>',

    components: {
     App
     }
 })

如果我删除这个 this.$store.state.authUser 它在这里工作是我的 store.js 文件

import Vue from 'vue'
 import Vuex from 'vuex'
 import userStore from './user/userStore.js'
 Vue.use(Vuex)
  const debug = process.env.NODE_ENV !== 'production'

 export default new Vuex.Store({
  modules:{
    userStore
  },

 strict:debug
 })

这是我的 userStore

 const state = {
   authUser:null
    }
const mutations  = {
    SET_AUTH_USER(state,userObj){
        state.authUser = userObj
        }
 }
   const actions = {
    setUserObject :({commit},userObj) =>{
        commit('SET_AUTH_USER',userObj)
     }
   }
  export default {
      state, mutations, actions
 }

这是我的登录成功，我尝试在商店中发送价值注意我在商店中有价值

  this.$store.dispatch('setUserObject',response.data.id)

我一切正常，但不知道为什么会抛出错误 Cannot read 属性 'state' of undefined

Answer 1

您正在使用 this.$store 在路由器的 beforeEach 守卫中访问您的商店。但是 this 不是你的 vue 实例并且没有 $store 属性.

由于您使用 import store from './store' 导入商店，您可以使用 store 导入来访问您的商店，如下所示：

router.beforeEach((to, from, next) => {
     console.log(store.state.userStore.authUser)// this will log put authUser from userStore module
      if (to.matched.some(record => record.meta.requiresAuth) && 
        (!store.state.userStore.authUser || 
  store.state.userStore.authUser === 'null')){
  const authUser = localStorage.getItem('authUser')
   console.log('here log');
   next({ path: '/', })

 }else{
   console.log('bhar else redirect');
  next()  
 }

});

authUser 属性属于 userStore 模块，因此要访问它，请使用

store.state.userStore.authUser

状态未在 vue 中定义

state not define in vue

vue.js

vuex