分析: 此题考查Vuex的应用及 Vue内部的监听数据变化的机制
解答: 首先确定 Vuex是为了解决什么问题而出现的 ? Vuex是为了解决组件间状态共享而出现的一个框架.其中有几个要素 是组成Vuex的关键, state(状态) mutations actions ,
state 表示 需要共享的状态数据
mutations 表示 更改 state的方法集合 只能是同步更新 不能写ajax等异步请求
actions 如果需要做异步请求 可以在actions中发起 然后提交给 mutations mutation再做同步更新
也就是 state 负责管理状态 , mutation负责同步更新状态 action负责 异步获取数据 同提交给mutation
所以 组件监听Vuex数据变化 就是 监听 Vuex中state的变化,
第一种方案 我们可以在组件中通过组件的 watch方法来做, 因为组件可以将state数据映射到 组件的计算属性上,
然后 监听 映射的计算属性即可 代码如下
// vuex中的state数据
state: {
count: 0
},
// A组件中映射 state数据到计算属性
computed: {
// this.$store.state.count
// mapState 把全局 count 变成 可以直接使用的 数据
...mapState(['count'])
}
// A组件监听 count计算属性的变化
watch: {
// watch 可以监听 data 数据 也可以监听 全局 vuex数据
count () {
// 用本身的数据进行一下计数
this.changeCount++
}
}
第二种方案 vuex中store对象本身提供了watch函数 ,可以利用该函数进行监听
-
watch(fn: Function, callback: Function, options?: Object): Function
响应式地侦听 fn 的返回值，当值改变时调用回调函数。fn 接收 store 的 state 作为第一个参数，其 getter 作为第二个参数。最后接收一个可选的对象参数表示 Vue 的 vm.$watch 方法的参数。
代码
created () {
this.$store.watch((state, getters) => {
return state.count
}, () => {
this.changeCount++
})
}