Vuejs 2, VUEX, привязка данных при редактировании данных

у меня есть профиль пользователя, и я пытаюсь разрешить пользователю редактировать свою информацию. Я использую vuex для хранения данных профиля пользователя и извлечения его в форму. Форма редактирования находится в дочернем компоненте компонента userProfile, который загружает сохранение данных, фиксирует его в VUEX.

поэтому я могу заполнить форму данными из VUEX, но как только я изменяю какие-либо значения в форме, он также изменяет значение в моем родительском компоненте.

Я не фиксировать изменения в VUEX, пока форма не будет сохранена, поэтому это означает, что данные привязаны к VUEX. У меня сложилось впечатление, что это невозможно. В этом случае это нежелательно, так как если пользователь изменяет некоторые данные, а затем переходит без фактического нажатия кнопки "Сохранить", данные VUEX по-прежнему изменяется.

Примечание, это упрощенный пример. Im фактически использует представление маршрутизатора для загрузки дочернего компонента, или я бы передал данные через реквизит. Я испытал загрузки edit-profile компонент прямо как показано ниже, и у меня такая же проблема.

пожалуйста, посмотрите код ниже, я не могу найти, почему данные отправляются обратно в магазин. Любая помощь очень ценится.

в родителе я устанавливаю получение пользовательских данных следующим образом:

<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;
        }
    }
}

здесь все работает.

In мой дочерний компонент с формой редактирования, я заполняю форму следующим образом:

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