javascript - 請教vuex中引用資料型別的正確使用方式？

Question

用vuex的時候，照道理，資料有變動的時候，需要使用呼叫action，再讓action去觸發mutation來更新資料。

但是像如下例子一樣，數據是引用數據類型的時候，我直接將數據用v-model綁定數據，數據就可以直接更改了，不需要再調用action 。

如果要呼叫action，那麼我只改對像中的其中一個key值，是要watch這個對象，然後物件有變化的時候，直接將新的物件以參數的形式傳遞過去，整個物件更新嗎？感覺這樣好麻煩，有其他簡單的方式嗎？

所以想問一下，像這種引用資料型，在vuex要怎麼用才是正確的呢？

附一下偽代碼：

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

這種直接修改的 vuex 狀態物件屬性的缺點是沒有經過 commit 或 dispatch，無法透過 Vue devtools 進行狀態變化的追蹤和調試

除了使用 watch 之外，還可以考慮以下方式：
https://jsfiddle.net/KingMari...
在 vuex 裡只要設定一個 updateKey1 的 mutation 就可以了，比你創建 deep watcher 要簡潔一些。