UserStore（Vuex）在VUE和Laravel 5.4

Question

我promble實現vuex 這是我的代碼： laravel /資源/資產/ JS/app.js

import router from './routes.js'; 
import store from './store.js' 
require('./bootstrap'); 

router.beforeEach((to,from,next) => { 
    if(to.matched.some(record => record.meta.requiresAuth)){ 

     const authUser = JSON.parse(window.localStorage.getItem('authUser')) 
     if(authUser && authUser.access_token){ 
      next() 
     }else{ 
      next({ 
       path: '/login', 
       query: { redirect: to.fullPath } 
      }) 
     } 
    } 
    next() 
}) 
Vue.component('top-menu',require('./components/topMenu.vue')) 
const app = new Vue({ 
    el: '#app', 
    router,store 
}); 

laravel /資源/資產/ JS/store.js

import Vue from 'vue' 
import Vuex from 'vuex' 
import userStore from './components/user/userStore.js' 

Vue.use(Vuex) 

const debug = process.env.NODE_ENV !=='production' 

export default new Vuex.Store({ 
    module:{ 
     userStore 
    }, 
    strict: debug 
}) 

laravel /資源/資產/ JS /組件/用戶/ userStore.js

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 
} 

這個頂部菜單laravel /資源/資產/ JS /組件/ topMenu.vue

<script> 
    import {mapState} from 'vuex' 
    export default { 
     computed: { 
      mapState(){ 
       userStore: state => state.userStore 
      } 
     }, 
     created() { 
      const userObj = JSON.parse(window.localStorage.getItem('authUser')) 
      this.$store.dispatch('setUserObject',userObj) 
     } 
    } 
</script> 
<template> 
    <div> 
     <pre>{{ userStore }}</pre> 
     <nav class="navbar navbar-default navbar-static-top" > 
      <div class="container"> 
       <div class="navbar-header"> 

        <!-- Collapsed Hamburger --> 
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse"> 
         <span class="sr-only">Toggle Navigation</span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
        </button> 

        <!-- Branding Image --> 
        <a class="navbar-brand" href="/"> 
         Laravel 
        </a> 
       </div> 

       <div class="collapse navbar-collapse" id="app-navbar-collapse"> 
        <!-- Left Side Of Navbar --> 
        <ul class="nav navbar-nav"> 
         &nbsp; 
        </ul> 

        <!-- Right Side Of Navbar --> 
        <ul class="nav navbar-nav navbar-right" v-if="userStore.authUser !== null && userStore.authUser.access_token"> 
         <!-- Authentication Links --> 
         <router-link to="/login" tag="li"><a>Login</a></router-link> 
         <router-link to="/register" tag="li"><a>Register</a></router-link> 
         <router-link to="/vendor/profile" tag="li"><a>Profile</a></router-link> 
        </ul> 
       </div> 
      </div> 
     </nav> 
    </div> 
</template> 

如果我運行代碼，我有埃羅

[vuex] unknown action type: setUserObject

[Vue warn]: Property or method "userStore" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. (found in at /var/www/html/wingding/resources/assets/js/components/topMenu.vue)

[Vue warn]: Error in render function: (found in at /var/www/html/wingding/resources/assets/js/components/topMenu.vue)

TypeError: Cannot read property 'authUser' of undefined

[Vue warn]: Error in mounted hook: (found in at /var/www/html/wingding/resources/assets/js/components/Home.vue)

請幫助我，謝謝！

Answer 1

錯誤：

TypeError: Cannot read property 'authUser' of undefined

應加入以下空檢查得到固定。

<!-- Right Side Of Navbar --> 
<ul class="nav navbar-nav navbar-right" v-if="userStore && userStore.authUser && userStore.authUser.access_token">