分析: 此题考查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++ }) }