[英]Vue - Vuex: store not updating when calling action from a child component
I am pulling my hair out over this. 我正在为此扯头发。 I am a Vue noob and am trying to build a User Selector.
我是Vue菜鸟,正在尝试构建用户选择器。
The User Selector component is a child component that is supposed to display all users in a then I have an @change handler to update the currentUser variable in the vuex store. 用户选择器组件是一个子组件,应该在中显示所有用户,然后我有一个@change处理程序来更新vuex存储中的currentUser变量。
I think I am using actions and mutations correctly but for some reason it won't set the currentUser to the payload. 我认为我正确使用了动作和变异,但由于某种原因,它不会将currentUser设置为有效负载。
UserSelector.vue UserSelector.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>
and my store.js is the following: 我的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);
}
}
});
Can someone please let me know what I am doing wrong? 有人可以让我知道我做错了吗? If I console.log the payload in setCurrentUser in mutations, it is correctly passing the new user key however after calling
如果我用console.log记录setCurrentUser中的有效负载突变,那么它将在调用后正确传递新用户密钥
state.currentUser = payload
the value of the currentUser in state remains as its default, which is 0. When I debug with with Vue dev tool, I can also see that the currentUser in the state remains unchanged. 处于状态的currentUser的值将保留为默认值0。使用Vue开发工具进行调试时,我还可以看到处于状态的currentUser保持不变。
Please help! 请帮忙!
I think there is conflict between v-model
and @change
handle. 我认为
v-model
和@change
句柄之间存在冲突。 Please try changing v-model to :value
and remove get set in computed: 请尝试将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;
},
},
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.