Vuex 3: 상태가 정의되지 않음

Vuex 3: 상태가 정의되지 않음

버전:

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

최종적으로 JWT를 사용하여 인증된 로그인을 허용하는 두 개의 필드를 사용하여 단순 로그인을 모의하려고 합니다.

그러나 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입니다만, 상태를 변환하는 방법이 변경되었습니까?

이 오류는 여기에 있습니다.login액션.

commit('authUser', {
  authData
})

그건 그냥...

  commit('authUser', authData)

원래 스테이트먼트에서는 새로운 오브젝트를 만듭니다.authData소유물.네가 하고 싶은 일은 그냥 통과시키는 거야authData돌연변이에 반대합니다.

여기 그것이 작동하는 시연이 있습니다.

언급URL : https://stackoverflow.com/questions/47457590/vuex-3-state-is-undefined