When using vuex, logically, when the data changes, you need to call action, and then let action trigger mutation to update the data.

But like the following example, when the data is a reference data type, I directly bind the data with v-model, and the data can be changed directly without calling action. .

If I want to call action, then I only change one of the key values ​​in the object, which is to watch this object, and then when the object changes , directly pass the new object in the form of parameters, will the entire object be updated? This seems very troublesome. Is there any other simple way?

So I would like to ask, how to use this reference data type correctly in vuex?

Attached is the pseudo code:

state

state = {
 nestedObject: {
    sub: {
        key1: 'value',
        key2: 'value',
        key3: 'value',
        ...
    }
 }
}

vue file

<template>
    <input v-model="nestedObject.sub.key1" />
</template>
<script>
    computed: {
        ...mapGetters([
            'nestedObject'
        ])
    }
</script>