我有一个用户个人资料部分,我试图让用户编辑他们的信息.我正在使用vuex存储用户配置文件数据并将其拉入表单.编辑表单位于userProfile组件的子组件中 – 加载数据保存将其提交给VUEX.
所以我可以使用VUEX中的数据填充表单,但是只要我更改表单中的任何值,它就会更改父组件中的值.
在保存表单之前,我没有对VUEX进行更改,因此这意味着数据绑定到VUEX的两个方向.我觉得这是不可能的.在这种情况下,不希望由于用户是否更改某些数据,然后导航而不实际点击“保存”,数据仍然是VUEX已更改.
注意,这是一个简化的例子.我实际上使用路由器视图来加载子组件,或者我将通过道具传递数据.我已经测试过直接加载编辑配置文件组件,就像它在下面一样,我有同样的问题.
请参阅下面的代码,我找不到为什么数据被发送回商店.任何帮助是极大的赞赏.
在父级中,我设置检索用户数据,如下所示:
<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>
这会加载结果并将它们存储在商店中,并且效果很好.
我的商店有这个:
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>