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>
phpcn_u15822017-05-19 10:45:48
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.