javascript - L'attribut State ne peut pas être lu à l'aide de l'invite Vuex ?
習慣沉默
習慣沉默 2017-05-19 10:37:11
0
1
736

Utiliser vuex pour la gestion de l'état
Mais je continue à recevoir des erreurs et je ne sais pas ce qui ne va pas


index.vue

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

paramètres 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
    }
})

utilisateur.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 }
})
習慣沉默
習慣沉默

répondre à tous(1)
伊谢尔伦

Peut-être devriez-vous l'appeler ainsi ?

computed: mapState({ user: state => state.user.user })
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!