javascript - 請教vuex中引用資料型別的正確使用方式?
PHP中文网
PHP中文网 2017-05-19 10:43:48
0
1
586

用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>
PHP中文网
PHP中文网

认证高级PHP讲师

全部回覆(1)
phpcn_u1582

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

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

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板