如何在组件中监听Vuex的数据变化

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