vuex中mapState思想應用

Posted on by

背景：

在需求開發過程中，有的接口返回的結果中有很多字段需要展示到頁面上。通常可以將這些字段在.vue文件中封裝為計算屬性，或者重新將對應字段賦值到 data 中的字段來達到便於使用的目的。如下：

computed(){
  count1(){
    return this.targetObj.count1
  },
  count2(){
    return this.targetObj.count2
  },
  // ...
  // 想象一下。你要寫 5 遍 或者 10 遍類似的代碼
}

但是不管哪種方法，都會帶來大量的代碼冗餘，極為難受。為解決這種現象，本文借用瞭使用瞭vuex 中 map 方法的思想，極大的縮減瞭冗餘代碼，並且能夠對數據獲取做統一的容錯處理。

1、map方法

vuex 中基本的 state 提取使用方法，可通過 以下方式：

computed(){
  count(){
    return this.$store.count
  }
}

同時 vuex 也同樣註意到瞭問題，當 store 中要獲取的數據很多時，這種方式將會產生極大的代碼冗餘，重復代碼遍地走。你將會看到大量的計算屬性的定義，以及長鏈路的對象屬性提取。因此vuex 定義瞭一種 map 方法，用來批量的獲取 store 中的指定數據。
這種 map 方法實際上就是一種 工廠函數（高階函數），用來生產特定形式的函數。以下是源碼，可以看到，mapState 其實最終會返回一個對象 res, res中的每個屬性都是一個方法，而這個方法返回 state 中的值。

  var mapState = normalizeNamespace(function (namespace, states) {
    // 定義一個對象 用於存儲 獲取指定屬性的方法
    var res = {};
    normalizeMap(states).forEach(function (ref) {
      var key = ref.key;
      var val = ref.val;
      // 定義 獲取指定對象中指定屬性的方法
      res[key] = function mappedState () {
        var state = this.$store.state;
        var getters = this.$store.getters;
        // 根據 namespace 查找指定的 store 模塊對象
        if (namespace) {
          var module = getModuleByNamespace(this.$store, 'mapState', namespace);
          if (!module) {
            return
          }
          state = module.context.state;
          getters = module.context.getters;
        }
        // 獲取通過指定 namespace 得到的 store module 中的屬性
        return typeof val === 'function'
          ? val.call(this, state, getters)
          : state[val]
      };
    });
    // 返回 函數對象
    return res
  });

2、應用

仿照這種思想，可以對某個復雜對象中的字段的獲取方式進行優化。定義的工廠函數如下所示

export const mapTargetValue = (nameSpace, keyList = [])=>{
  const result = {}
  // 註意：返回的方法不要使用箭頭函數，否則拿不到 this
  // 這裡 可以兼容兩種形式的 keyList ，參考 mapState 中屬性重命名的使用形式
  if(Array.isArray(keyList)){
    keyList.forEach( key => result[key] = function(){ 
        // 這裡假設 可以直接在 this 上 獲取得到 namespace對象
        // 當然 指定對象的獲取復雜程度取決於 你的代碼邏輯
        return this[nameSpace][key] || 0
    })   
  }else if(typeof keyList === 'object' && keyList){
    for(let key in keyList){
      result[keyList[key]] = function(){ return this[nameSpace][key] || 0}
    }
  }
  return result
}

定義的該方法使用方式與 mapState 使用方式完全一致。與之前的取值方式相比，可大大縮減重復代碼量。具體應用如下

computed: {
    ...mapTargetValue("targetObj", ["count1", "count2"]),
    ...mapTargetValue("targetObj", { count1: "count3", count2: "count4"}),
}

到此這篇關於vuex中mapState思想應用的文章就介紹到這瞭,更多相關vuex mapState內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：