获取 vuex state 中的值一定要使用 computed 而不能使用 data 吗?
data 中的内容只会在 created 钩子触发前初始化一次,类似于你直接写 const data = { foo: 123 } 这样,这时属性的值是纯粹的字面量。
JS 字面量赋值后显然不会自动更新。最简单的例子:
let b = 'xxx' let a = b b = 'xyz' // 这时对于原始类型,a 肯定还是 'xxx'
换句话说,data 中内容依赖变更时,data 属性不会变更(它的设计目标就是保存组件的局部状态数据而已)。
而 computed 则是通过【依赖追踪】实现的,在 computed 求值时引用的 Vue 变量变化时,会触发对 computed 的重新计算。
所以你可以使用 computed 去引用 Vuex 状态变量,从而使得依赖追踪生效。
或者,将 Vuex 状态变量通过 mapStateToComputed 映射为 computed 也是一个很方便的选择。