javascript - 使用vuex提示读不到state属性？

问题描述

问 题

使用vuex进行状态管理
但是一直报错不知道哪错了

index.vue

<template>
    <div>
        <v-header title="首页">
            <router-link slot="right" to="/home">{{user.name}}</router-link>
        </v-header>
        <div class="login-msg">
            <router-link to="/login">请登录</router-link>
        </div>
        <div class="msg" v-if="user.id">
            哈哈，恭喜你已经入坑Vue2
        </div>
    </div>
</template>
<script>
    import { mapState } from 'vuex'
    export default {
        data() {
            return {
                logo:''
            }
        },
        computed: mapState({ user: state => state.user }),
    }
</script>

vuex的设置(index.js,user.js)

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import user from './user'
Vue.use(Vuex)
export default new Vuex.Store({
    strict:process.env.NODE_ENV!=='production',//在非生产环境下，使用严格模式
    modules:{
        user
    }
})

user.js

import Vue from 'vue'

export const USER_SIGNIN = 'USER_SIGNIN' //登录成功
export const USER_SIGNOUT = 'USER_SIGNOUT' //退出登录

export default {
    state:{
        user:JSON.parse(sessionStorage.getItem('user')) || {}
    },
    mutations: {
        [USER_SIGNIN](state, user) {
            sessionStorage.setItem('user', JSON.stringify(user))
            Object.assign(state, user)
        },
        [USER_SIGNOUT](state) {
            sessionStorage.removeItem('user')
            Object.keys(state).forEach(k => Vue.delete(state, k))
        }
    },
    actions: {
        [USER_SIGNIN]({commit}, user) {
            commit(USER_SIGNIN, user)
        },
        [USER_SIGNOUT]({commit}) {
            commit(USER_SIGNOUT)
        }
    }
}

main.js

    // The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
import vHeader from './components/vHeader'

Vue.config.productionTip = false
// 全局注册组件
Vue.component('vHeader',vHeader)
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: { App }
})

解决方案

或许你应该这样调用?

computed: mapState({ user: state => state.user.user })

这篇关于javascript - 使用vuex提示读不到state属性？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！