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

Question

问题引自：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 的变化呢？

Answer 1

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

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 也是一个很方便的选择。

Answer 2

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变化的时候，并不会触发data中topicList的setter。

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

Answer 3

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