获取 vuex state 中的值一定要使用 computed 而不能使用 data 吗?

问题引自:https://segmentfault.com/q/10…

回答者提到:

data是有缓存的,一旦Vuex中值改变了,没法做到响应。
而放在computed中,虽然也有缓存,但会自动监视依赖。

请问什么叫自动监视依赖呢?

记得 Vue 官方文档中提到过几种不会触发更新检测的情况,其中包括直接修改对象的属性。还提到这时需要用 Vue.set() 进行修改。

是不是形如以下方式:

data(){
        return {
            topicList: this.$store.state.topicList
        }
    },

会导致 topicList 不会因 Vuex 中管理的 state.topicList 的修改而变化。

而:

computed:{
        topicList(){
            return this.$store.state.topicList
        } 
    }
}

这种方式会监听 state 中 topicList 的变化呢?

回答:

这明显是回答者自己没搞懂而生造的概念。

data 中的内容只会在 created 钩子触发前初始化一次,类似于你直接写 const data = { foo: 123 } 这样,这时属性的值是纯粹的字面量,而不是回答者所谓的【缓存】(没有 Cache Miss 哪来的缓存?)。JS 字面量赋值后显然不会自动更新。最简单的例子:

let b = 'xxx'
let a = b
b = 'xyz' // 这时对于原始类型,a 肯定还是 'xxx'

换句话说,data 中内容依赖变更时,data 属性不会变更(它的设计目标就是保存组件的局部状态数据而已)。而 computed 则是通过【依赖追踪】实现的,在 computed 求值时引用的 Vue 变量变化时,会触发对 computed 的重新计算。

所以你可以使用 computed 去引用 Vuex 状态变量,从而使得依赖追踪生效。或者,将 Vuex 状态变量通过 mapStateToComputed 映射为 computed 也是一个很方便的选择。

回答:

vue的双向绑定机制简单来说,就是劫持一个属性的赋值方法setter,并触发相应的视图更新。

在computed属性中,vue会根据函数的逻辑,自动判断依赖。比如你代码中的,

computed:{
        topicList(){
            return this.$store.state.topicList
        } 
    }
}

它就知道,当这个依赖:this.$store.state.topicList 发生变化时,要重新计算 topicList 属性的值,并触发相应的更新操作。

data中的topicList,仅仅是对this.$store.state.topicList的一个引用。
(如果this.$store.state.topicList 不是对象与数组的话,那就只是个赋下值给topList)。

所以当this.$store.state.topicList变化的时候,并不会触发datatopicListsetter

感觉自己讲的不是很清楚,具体的还是要自己的研究下vue的实现原理,才会比较清晰。

回答:

rails webpacker中使用Vuex, 通过Vue调试面板可以看到通过mutation使得Vuex中状态值改变了,但通过computed获取vuex state的变量却没有变,不知道可能是哪里出了问题

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注