Vuex 3：状態は未定義である

Question

バージョン：

"vue": "2.4.2", 
"vue-router": "2.7.0", 
"vuex": "3.0.1" 

私が最後にJWTは、認証済みログインを許可する必要があります2つのフィールドを持つシンプルなログインを模擬しようとしています。

しかし、Vuexでの状態は、それが

がLogin.vueから始まって "未定義" であることを変更して、意志出力することを拒否：

<template> 
    <div class="login" id="login"> 
    <b-form-input 
     id="inputfield" 
     v-model="username" 
     type="text" 
     placeholder="username"> 
    </b-form-input> 
    <b-form-input 
     id="inputfield" 
     type="password" 
     v-model="password" 
     placeholder="password"> 
    </b-form-input> 
    <b-button @click="login()" id = "inputfield" variant="outline-success"> 
     Login 
    </b-button> 
    </div> 
</template> 

<script> 
    export default { 
    name: 'login', 
    data() { 
     return { 
     username: '', 
     password: '' 
     } 
    }, 
    methods: { 
     login() { 
     this.$store.dispatch('login', { 
      username: this.username, 
      password: this.password, 
      isAuthed: true // this is a temp test to see if it changes 
     }) 
     } 
    } 
    } 
</script> 

店があるなど：

export default new Vuex.Store({ 
    state: { 
    username: null, 
    loggedIn: false 
    }, 
    mutations: { 
    authUser (state, userData) { 
     console.log(userData.isAuthed) // True! 
     state.username = userData.username 
     state.loggedIn = userData.isAuthed 
     console.log(state.loggedIn) // Undefined? 
     console.log(state.username) // Also undefined? 
    } 
    }, 
    actions: { 
    login ({commit}, authData) { 
     console.log(authData) 
     commit('authUser', { 
     authData 
     }) 
    } 
}) 

言い換えれば、流れの周りのisAuthedとusernameに従うことができ、いつも存在しているようにしようとするとすべてがうまくいかない状態に新しい価値を付ける。私はそれを間違っているのですか？これはガイドに従っていますが、ここではvuexはバージョン3です。状態を変更する方法を変更しましたか？

Answer 1

あなたのloginアクションにはエラーがあります。ちょうどあなたがauthDataプロパティで新しいオブジェクトを作成している、元の文では

commit('authUser', authData) 

でなければなりません

commit('authUser', { 
    authData 
}) 

。あなたがしたいことは、authDataオブジェクトを突然変異に渡すだけです。

ここにはa demonstrationが有効です。