Vue-Vuex：从子组件调用操作时存储不更新

Question

为此我要拔头发。我是一个Vue新手，并试图建立一个用户选择器。

User Selector组件是一个子组件，它应该显示vuex存储中的所有用户，然后我有一个@change处理程序来更新vuex存储中的currentUser变量。

我认为我正确地使用了动作和突变，但由于某些原因，它不会将currentUser设置为有效负载。

用户选择器。vue

<template>
  <select class="user-selector" v-model="currentUser" @change="handleChange($event)">
    <option v-for="user in users" :key="user" :value="user">User {{ user }}</option>
  </select>
</template>

<script>
export default {
  name: "UserSelector",
  methods: {
    handleChange(event) {
      this.$store.dispatch("setCurrentUser", event.currentTarget.value);
    }
  },
  computed: {
    users() {
      return this.$store.getters.users;
    },
    firstUser() {
      return this.users[0];
    },
    currentUser: {
      get: function() {
        return this.$store.getters.currentUser;
      },
      set: function(newCurrentUser) {
        this.$store.dispatch("setCurrentUser", event.currentTarget.value);
      }
    }
  },
  updated() {
    const { firstUser } = this;
    if (firstUser) {
      this.$store.dispatch("setCurrentUser", firstUser);
    }
  }
};
</script>

我的store.js如下：

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    todos: {},
    users: [],
    currentUser: 0
  },
  getters: {
    todos(state) {
      return state.todos;
    },
    users(state) {
      return state.users;
    },
    currentUser(state) {
      return state.currentUser;
    }
  },
  mutations: {
    setTodos(state, payload) {
      state.todos = { ...payload };
    },
    setUsers(state, payload) {
      state.users = [...payload];
    },
    setCurrentUser(state, payload) {
      state.currentUser = payload;
    }
  },
  actions: {
    setTodos(context, payload) {
      context.commit("setTodos", payload);
    },
    setUsers(context, payload) {
      context.commit("setUsers", payload);
    },
    setCurrentUser(context, payload) {
      context.commit("setCurrentUser", payload);
    }
  }
});

有人能告诉我我做错了什么吗？如果我能安慰你。将有效负载记录在setCurrentUser中，但在调用

state.currentUser = payload

状态中当前用户的值保持为其默认值，即0。当我用Vue dev工具调试时，我还可以看到状态中的当前用户保持不变。

请帮忙！

Answer 1

我认为v-model和@change手柄之间存在冲突。请尝试将v-model更改为：value，并删除计算中的get set：

<select class="user-selector" :value="currentUser" @change="handleChange($event)">
  <option v-for="user in users" :key="user" :value="user">User {{ user }}</option>
</select>

  computed: {
    currentUser: {
      return this.$store.getters.currentUser;
    },
  },