Vue.js 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>

---

换句话说，我可以跟随

isAuthed

和

username

在流中运行，它们总是存在的，当尝试为状态分配新值时，一切都会出错。我做错了吗？这是按照指南进行的，但是vuex在这里是版本3，它们是否改变了您改变状态的方式？

错误在您的

登录操作中

commit('authUser', {
  authData
})

那应该是

  commit('authUser', authData)

在原始语句中，您正在使用
authData
属性创建一个新对象。您只需将
authData
对象传递给该对象

这是它的工作原理。
它工作原理，谢谢。现在，我的组件不会在存储更改时更新，但是，在
v-if
中，这很奇怪。。因为它记录了状态的变化。但这是另一个问题
  commit('authUser', authData)