Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
188 views
in Technique[技术] by (71.8m points)

使用vuex提示读不到state属性?

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

clipboard.png
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 }
})

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

或许你应该这样调用?

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...