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

【问题标题】：Vue - Vuex: store not updating when calling action from a child componentVue - Vuex：从子组件调用操作时存储不更新
【发布时间】：2019-11-25 23:12:20
【问题描述】：

我正在为此拉头发。我是 Vue 菜鸟，正在尝试构建用户选择器。

用户选择器组件是一个子组件，它应该显示所有用户，然后我有一个 @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);
    }
  }
});

有人可以告诉我我做错了什么吗？如果我 console.log 改变 setCurrentUser 中的有效负载，它会正确传递新的用户密钥，但是在调用

state.currentUser = payload

state的currentUser的值保持默认，为0。当我用Vue开发工具调试时，我也可以看到state的currentUser保持不变。

请帮忙！

【问题讨论】：

标签： javascript vue.js state vuex store

【解决方案1】：

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

<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;
    },
  },

【讨论】：

或者只是删除 @change 句柄并保留 v-model 原样