Vuejs 2,VUEX,编辑数据时的数据绑定

Question

我有一个用户个人资料部分,我试图让用户编辑他们的信息.我正在使用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>

Answer 1

如果您正在寻找具有vuex的非绑定解决方案,您可以克隆该对象并使用本地版本的v-model而不是提交提交它.

在您创建的生命周期函数中执行此操作:

created (){
    this.profile = Object.assign({}, this.$store.getters.getUserDetails);
},