Question

大家好我跟随一切提供没有谷歌，但没有这些工作我新的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
     }
 })

如果我删除这个，一切都正常工作。$ 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)

我做的一切都正常，但不知道为什么它会抛出错误无法读取未定义的属性'state'

Answer 1

您正在使用beforeEach在路由器的this.$store后卫中访问您的商店。但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中定义

1 个答案: