Question

我很擅长实施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
}

这个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]未知动作类型：setUserObject

[Vue警告]：未定义属性或方法“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）

请帮助我，谢谢!!

Answer 1

错误：

TypeError：无法读取属性＆＃39; authUser＆＃39;未定义的

应该通过添加以下空检查来解决。

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

UserStore（Vuex）在vue和Laravel 5.4中

1 个答案: