javascript - Could you please tell me the correct way to use reference data types in vuex?

Question

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>

Answer 1

The disadvantage of this directly modified vuex state object attribute is that it cannot be tracked and debugged through Vue devtools without commit or dispatch

In addition to using watch, you can also consider the following methods:
https://jsfiddle.net/KingMari...
In vuex, you only need to set a mutation of updateKey1, which is simpler than creating a deep watcher.