UserStore（Vuex）在vue和Laravel 5.4中

我已经承诺将我的代码实现为vuex：laravel / resources / assets / 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
}

这个topMenu laravel / resources / assets / js / components / 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]：属性或方法“userStore”未在实例上定义，但在呈现期间引用 . 确保在数据选项中声明反应数据属性 . （在/var/www/html/wingding/resources/assets/js/components/topMenu.vue中找到）[Vue警告]：渲染函数出错:(在/ var / www / html / wingding / resources /中找到assets / js / components / topMenu.vue）TypeError：无法读取未定义的属性'authUser'[Vue警告]：挂钩时出错:(在/ var / www / html / wingding / resources / assets / js / components中找到/Home.vue）

请帮帮我，谢谢!!