javascript - 请教一下vuex中引用数据类型的正确使用方式?
PHP中文网
PHP中文网 2017-05-19 10:43:48
0
1
597

用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 要简洁一些。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板