我有一个用户配置文件部分,我试图允许用户编辑他们的信息.我正在使用vuex存储用户配置文件数据,并将其拉入表单.编辑表单位于userProfile组件的子组件中,该组件加载数据保存并将其提交到VUEX.
因此,我可以使用VUEX中的数据填充表单,但只要我更改表单中的任何值,它也会更改父组件中的值.
在保存表单之前,我不会向VUEX提交更改,因此这意味着数据会双向绑定到VUEX.我觉得这是不可能的.在这种情况下,这是不需要的,因为如果用户更改了一些数据,然后在没有实际单击"保存"的情况下导航离开,则数据仍然是VUEX,并且仍然更改.
注意,这是一个简化的例子.我实际上使用路由视图来加载子组件,或者我会通过props 传递数据.我已经测试过直接加载编辑配置文件组件,就像下面一样,我也有同样的问题.
请看下面的代码,我找不到数据被送回store 的原因.非常感谢您的帮助.
在parent中,我设置如下检索用户数据:
<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>
这将加载结果并将其存储在store 中,效果非常好.
我的store 有:
const store = new Vuex.Store({
state: {
userDetails: {}
},
mutations: {
setData(state, payload){
state[payload.name] = payload.data;
}
},
getters: {
getUserDetails: state => {
return state.userDetails;
}
}
}
这里一切正常.
在我的带有编辑表单的子组件中,我按如下方式填充表单:
<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>