如何在元件中監聽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++
    })
  }