javascript - 请教一下vuex中引用数据类型的正确使用方式？

问题描述

问 题

用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>

解决方案

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

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

这篇关于javascript - 请教一下vuex中引用数据类型的正确使用方式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！