Vuejs 2，VUEX，编辑数据时的数据绑定 [英] Vuejs 2, VUEX, data-binding when editing data

问题描述

我有一个用户个人资料部分，我正在尝试允许用户编辑其信息。我正在使用vuex来存储用户配置文件数据并将其拉入表单。编辑表单位于userProfile组件的子组件中-加载数据保存并将其提交到VUEX。

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.

所以我可以用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.

在保存表单之前，我不会提交对VUEX的更改，因此这意味着将数据绑定到VUEX的两种方式。我觉得这是不可能的。在这种情况下，这是不希望的，因为如果用户更改了一些数据，然后在没有实际单击保存的情况下导航离开，则该数据仍然是VUEX。

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.

注意，这是一个简化的示例。我实际上使用路由器视图来加载子组件，否则我将通过道具传递数据。我已经测试过像下面这样直接加载edit-profile组件，并且我有同样的问题。

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.

我的商店有这个：

const store = new Vuex.Store({
    state: {
        userDetails: {}
    },
    mutations: {
        setData(state, payload){
            state[payload.name] = payload.data;
        }
    },
    getters: {
        getUserDetails: state => {
            return state.userDetails;
        }
    }
}

这里的一切都在工作。

在带有编辑表单的子组件中，我这样填充表单：

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>

推荐答案

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

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屋！