Question

版本：

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

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

但是，Vuex中的州拒绝改变并输出它是＆＃34;未定义＆＃34;

从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：状态未定义

1 个答案: