Vuex 3：状态未定义

Question

版本：

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

我正在尝试使用两个字段模拟一个简单的登录，最终将有 JWT 以允许经过身份验证的登录。

但是Vuex中的state拒绝改变，会输出"undefined"

从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 操作中。

commit('authUser', {
  authData
})

应该就是

  commit('authUser', authData)

在原始语句中，您正在创建一个带有 authData 属性的新对象。您要做的只是将 authData 对象传递给突变。

这是 a demonstration 它的工作原理。

Vuex 3：状态未定义

Vuex 3: State is undefined

vue.js

vuejs2

vuex