Vuex： [Vue 警告]：计算属性"username"被分配到，但它没有 setter

Question

我正在尝试设置并从全局vuex状态获取用户名，密码和身份验证布尔值，并有条件地在纳维尔（Navbar）中呈现一些元素。这是应该传递数据的登录组件：

<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',
    computed: {
      username () {
        return this.$store.state.username
      },
      password () {
        return this.$store.state.password
      },
      loggedIn () {
        return this.$store.state.loggedIn
      }
    },
    methods: {
      login () {
        this.$store.dispatch('login', {
          username: this.username,
          password: this.password,
          isAuthed: true // just to test
        })
      }
    }
  }
</script>

但是，当我在输入字段中输入任何内容时，Vue会为该字段提供警告（状态将不会更新）：

[Vue warn]: Computed property "username" was assigned to but it has no setter.

Answer 1

您使用 V-Model 使用计算属性，因此您实际上是在尝试更新该计算属性时火。

因此，您需要为您的计算属性设置设置器。

当您尝试使用vuex状态时，您的计算属性设置器可以将突变施加到商店。

computed: {
  username : {
    get () {
      return this.$store.state.username
    },
    set (value) {
      this.$store.commit('updateUsername', value)
    }
  },
  password : {
    get () {
      return this.$store.state.password
    },
    set (value) {
      this.$store.commit('updatePassword', value)
    }
  },
  ...
},

您需要为您的商店提供相应的突变，例如：

mutations: {
  updateUsername (state, username) {
    state.username = username
  },
  updatePassword (state, password) {
    state.username = password
  },
  ...
}

有关更多详细信息，请参见Vuex文档中的说明：https://vuex.vuejs.org/en/forms.html

---

对于您的登录按钮，您正在尝试派遣操作。如果您只想在商店中设置布尔值，则可以派遣这样的操作：

methods: {
  login () {
    this.$store.dispatch('login', true)
  }
}

...然后在您的商店中，您需要一个相应的动作和突变才能提交：

mutations: {
  login (state, value) {
    state.isAuthed = value
  }
},
actions: {
  login ({ commit }) {
    commit('login')
  }
}

这是采取行动的文档：https://vuex.vuejs.org/en/actions.html

我希望这会有所帮助。