javascript - Könnten Sie mir bitte erklären, wie Referenzdatentypen in Vuex richtig verwendet werden?

Question

Wenn Sie Vuex verwenden, müssen Sie logischerweise den Aufruf action，再让action去触发mutation verwenden, um die Daten zu aktualisieren, wenn sich die Daten ändern.

Aber wie im folgenden Beispiel verwende ich die Daten direkt, wenn es sich bei den Daten um einen Referenzdatentyp handelt v-model绑定数据，数据就可以直接更改了，不需要再调用action.

Wenn Sie dieses Objekt aufrufen möchten und dann, wenn sich das Objekt ändert, das neue Objekt direkt in Form von Parametern übergeben möchten, wird dann das gesamte Objekt aktualisiert? Das scheint sehr mühsam zu sein. Gibt es eine andere einfache Möglichkeit? action，那么我只改对象中的其中一个key值，是要watch

Ich möchte also fragen, wie man einen Referenzdatentyp wie diesen in

richtig verwendet? vuex

Anbei ist der Pseudocode:

Zustand

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

vue-Datei

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

Answer 1

这种直接修改的 vuex 状态对象属性的缺点是没有经过 commit 或者 dispatch，无法通过 Vue devtools 进行状态变化的跟踪和调试

除了使用 watch 之外，还可以考虑如下方式：
https://jsfiddle.net/KingMari...
在 vuex 里只要设置一个 updateKey1 的 mutation 就可以了，比你创建 deep watcher 要简洁一些。