[英]Update State in Vuex?
I am trying to create a user Profile form where you can edit user's information such as name and age.我正在尝试创建一个用户配置文件表单,您可以在其中编辑用户的信息,例如姓名和年龄。 I have 2 routes set up, the
/
which is for the main user component and the /edit
which leads to the user Edit component.我设置了 2 条路由,用于主用户组件的
/
和通向用户 Edit 组件的/edit
。 I have a user
state that i am looping over to output name
and age
for a user in my User
Component.我有一个
user
state,我在我的User
组件中循环到 output 用户的name
和age
。 I have added a method in my User
component named enterEditMode
which on click fetches name
and age
property of the user selected and then outputs that into the form in my EditMode
Component.我在我的
User
组件中添加了一个名为enterEditMode
的方法,单击该方法会获取所选用户的name
和age
属性,然后将其输出到我的EditMode
组件中的表单中。 I am trying to create a method which onClick
would update the name or age of the user.我正在尝试创建一种方法,
onClick
将更新用户的姓名或年龄。 So i'd like to click on Sam and on the next page, update his name to Samuel
and then click on Update Info
button which should update the name Sam
to Samuel
on my User
component page.所以我想点击 Sam,在下一页上,将他的名字更新为
Samuel
,然后点击Update Info
按钮,这应该在我的User
组件页面上将Sam
的名字更新为Samuel
。
But i am having a hard time figuring out how i will do it.但我很难弄清楚我将如何做到这一点。
Please check this complete working Example .请检查这个完整的工作示例。
This is my Vuex Store:-这是我的 Vuex 商店:-
state: {
user: [{ name: "Max", age: 29 }, { name: "Sam", age: 28 }],
name: "",
age: null
},
getters: {
getUser: state => state.user,
getName: state => state.user.name,
getAge: state => state.user.age
},
mutations: {
setName(state, payload) {
state.name = payload;
},
setAge(state, payload) {
state.age = payload;
}
}
This is my User Component:-这是我的用户组件:-
<template>
<v-container>
<v-flex v-for="(user,index) in getUser" :key="index">
{{ user.name }} {{user.age}}
<v-icon @click="enterEditMode(index)">create</v-icon>
</v-flex>
</v-container>
</template>
<script>
import { mapGetters, mapMutations } from "vuex";
export default {
name: "User",
computed: {
...mapGetters({
getUser: "getUser"
})
},
methods: {
...mapMutations({
setName: "setName",
setAge: "setAge"
}),
enterEditMode(index) {
this.setName(this.getUser[index].name);
this.setAge(this.getUser[index].age);
this.$router.push({ name: "EditMode", params: { index: index } });
}
}
};
</script>
This is my EditMode Component:-这是我的 EditMode 组件:-
<template>
<v-card>
<v-text-field solo v-model="name"></v-text-field>
<v-text-field solo v-model="age"></v-text-field>
<v-btn>Update Info</v-btn>
</v-card>
</template>
<script>
import { mapGetters } from "vuex";
export default {
computed: {
...mapGetters({
getName: "getName",
getAge: "getAge"
}),
name: {
get() {
return this.getName;
},
set(val) {
return this.$store.commit("setName", val);
}
},
age: {
get() {
return this.getAge;
},
set(val) {
return this.$store.commit("setAge", val);
}
}
},
methods: {
updateInfo() {
this.$router.push('/')
}
}
};
</script>
Thank you for all the help guys.谢谢大家的帮助。 Thank you.
谢谢你。
You need to create a mutation in the store to update the user
list.您需要在商店中创建一个突变来更新
user
列表。 For instance to update the selected user name:例如更新选定的用户名:
Create a updateUserName
mutation, and make sure the payload
contains both the user index and name to be updated:创建一个
updateUserName
突变,并确保payload
包含要更新的用户索引和名称:
mutations: {
updateUserName(state, payload) {
state.user[payload.index].name = payload.name;
}
}
And then in the EditMode.vue
file, let the set method of computed name to commit the updateUserName
mutation we just created, keep in mind to pass in both the index and name properties:然后在
EditMode.vue
文件中,让计算名称的 set 方法提交我们刚刚创建的updateUserName
突变,记住要同时传入 index 和 name 属性:
name: {
get() {
return this.getName;
},
set(val) {
return this.$store.commit("updateUserName", {
name: val,
index: this.index
});
}
}
Here index
is another computed property taken from the route parameters for convenience:为了方便起见,这里的
index
是从路由参数中获取的另一个计算属性:
index() {
return this.$route.params.index;
},
Check the CodeSandbox working example .检查CodeSandbox 工作示例。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.