Vuejs 2、VUEX、编辑数据时绑定数据 [英] Vuejs 2, VUEX, data-binding when editing data
问题描述
我有一个用户个人资料部分，我试图允许用户编辑他们的信息.我正在使用 vuex 存储用户配置文件数据并将其拉入表单.编辑表单位于 userProfile 组件的子组件中 - 加载数据保存提交到 VUEX.
所以我可以用来自 VUEX 的数据填充表单，但是一旦我更改表单中的任何值，它也会更改我父组件中的值.
在保存表单之前，我不会提交对 VUEX 的更改，因此这意味着数据以两种方式绑定到 VUEX.我的印象是这是不可能的.在这种情况下，这是不希望的，因为如果用户更改了一些数据，然后导航离开而不实际单击保存"，则数据 VUEX 仍会更改.
注意，这是一个简化的例子.我实际上使用路由器视图来加载子组件，或者我会通过道具传递数据.我已经测试过直接加载编辑配置文件组件，如下所示，我遇到了同样的问题.
请看下面的代码，我找不到数据被发送回商店的原因.任何帮助是极大的赞赏.
在父级中，我像这样设置检索用户数据:
<div class="内容"><h1>{{getUserDetails.firstname}} {{getUserDetails.lastname}} </h1><edit-profile></edit-profile><脚本>从 'vuex' 导入 { mapGetters };从'./Edit.vue'导入EditProfile；导出默认{数据() {返回 {//数据}},创建(){this.fetchData();},组件: {编辑配置文件:编辑配置文件},计算:mapGetters(['获取用户详细信息']),方法: {fetchData: 函数 () {var _this = this;//ajax 调用 - 然后_this.$store.commit('setData', {名称:'用户详细信息'，数据: response.data.data.userDetails});}}}
这会加载结果并将它们存储在商店中，并且效果很好.
我的商店有这个:
const store = new Vuex.Store({状态: {用户详细信息:{}},突变:{设置数据(状态，有效载荷){状态[payload.name] = payload.data;}},吸气剂:{getUserDetails: 状态 =>{返回 state.userDetails;}}}这里一切正常.
在我的带有编辑表单的子组件中，我像这样填充表单:
<表格><label>名称</label><input name="firstname" v-model="profile.firstname"><input name="lastname" v-model="profile.lastname"><button v-on:click="save">提交</button></表单><脚本>从'vuex'导入{mapGetters}；导出默认{数据() {返回 {轮廓:{}}},手表: {获取用户详细信息(新数据){this.profile = newData;}},创建(){this.profile = this.$store.getters.getUserDetails;},计算:mapGetters(['获取用户详细信息']),方法:{保存 (){var _this = this;//ajax 调用 POST this.profile 然后_this.$store.commit('setData', {名称:'用户详细信息'，数据:this.profile});}}}如果您正在寻找使用 vuex 的非绑定解决方案，您可以克隆对象并使用 v-model 的本地版本，而不是在提交时提交.
>
在您创建的生命周期函数中执行以下操作:
创建(){this.profile = Object.assign({}, this.$store.getters.getUserDetails);},I have a user profile section and Im trying to allow the user to edit their information. I am using vuex to store the user profile data and pulling it into the form. The edit form is located in a child component of the userProfile component - which loads the data save commits it to VUEX.
So I can populate the form with the data from VUEX, but as soon as I change any values in the form, it changes the value in my parent component as well.
I am not committing changes to VUEX until the form is saved, so it means the data is bound two way to VUEX. I was under the impression this was not possible. In this case it is not desired since if the user changes some data, then navigates away without actually clicking "save", the data is VUEX is still changed.
Note, this is a simplified example. Im actually using router view to load the child component, or I would pass the data through props. I have tested loading the edit-profile component directly like it is below, and I have the same issue.
Please see the code below, I can't find why the data is being sent back up to the store. Any help is greatly appreciated.
In the parent, I set retrieve the user data like so:
<template>
<div class="content">
<h1>{{getUserDetails.firstname}} {{getUserDetails.lastname}} </h1>
<edit-profile></edit-profile>
</div>
</template>
<script>
import { mapGetters } from 'vuex';
import EditProfile from './Edit.vue';
export default {
data() {
return {
// data
}
},
created () {
this.fetchData();
},
components: {
EditProfile:EditProfile
},
computed: mapGetters([
'getUserDetails'
]),
methods: {
fetchData: function () {
var _this = this;
// ajax call - then
_this.$store.commit('setData', {
name: 'userDetails',
data: response.data.data.userDetails
});
}
}
}
</script>
This loads the results and stores them in the store, and works great.
My store has this:
const store = new Vuex.Store({
state: {
userDetails: {}
},
mutations: {
setData(state, payload){
state[payload.name] = payload.data;
}
},
getters: {
getUserDetails: state => {
return state.userDetails;
}
}
}
Everything here is working.
In my child component with the edit form, I am populating the form like this:
<template>
<form>
<label>Name</label>
<input name="firstname" v-model="profile.firstname">
<input name="lastname" v-model="profile.lastname">
<button v-on:click="save">submit</button>
</form>
</template>
<script>
import {mapGetters } from 'vuex';
export default {
data() {
return {
profile:{}
}
},
watch: {
getUserDetails (newData){
this.profile = newData;
}
},
created (){
this.profile = this.$store.getters.getUserDetails;
},
computed: mapGetters([
'getUserDetails'
]),
methods:{
save (){
var _this = this;
// ajax call to POST this.profile then
_this.$store.commit('setData', {
name: 'userDetails',
data: this.profile
});
}
}
}
</script>
If you are looking for a non binding solution with vuex you can clone the object and use the local version for v-model than on submit commit it.
in your created lifecycle function do this:
created (){
this.profile = Object.assign({}, this.$store.getters.getUserDetails);
},
这篇关于Vuejs 2、VUEX、编辑数据时绑定数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
