鍍金池/ 問答/HTML/ 如何自動(dòng)生成對(duì)應(yīng)于 state 的 computed 數(shù)據(jù)(非 mapGette

如何自動(dòng)生成對(duì)應(yīng)于 state 的 computed 數(shù)據(jù)(非 mapGetters 那么簡(jiǎn)單)

假設(shè) store 中的state數(shù)據(jù)如下:

state: {
    name: '',                     // 姓名
    headPortrait: '',             // 頭像
    birthday: '',                 // 出生日期
    relationship: '',             // Ta 是你的
    mobilePhone: '',              // 手機(jī)號(hào)
    certificatesNumber: '',       // 身份證號(hào)碼
    isSocialSecurity: '',         // 有無社保 Y/N
    certificates: [               // 證件
      {
        type: '護(hù)照',
        name: 'Avery',
        number: ''
      }
    ]
  },

如果頁面中我想直接消費(fèi)這些數(shù)據(jù),無需轉(zhuǎn)換后使用,那么其實(shí)可以直接在組件中通過 $store.state.name 等訪問到。但是這樣一來,我就必須在所有地方都使用 $store.state 前綴,如果分了模塊的話,前綴還可能有模塊名,這很長(zhǎng)很繁瑣。
對(duì)此,可以寫一個(gè) getter, 如
contactInfo: state => state,
那么將該 getter 映射到 computed 屬性,組件中就可以使用 contactInfo.name 之類的訪問數(shù)據(jù)了。然而,每次訪問時(shí)又必須寫上 contactInfo 前綴,我仍然覺得這很 repetitive。其實(shí),我很想在組件中直接用 name, headPortrait, ... 這樣的變量。于是,我就需要在computed 屬性中指定所有的字段生成規(guī)則,如下:

computed: {
      name: function() {
        return this.$store.getters.contactInfo.name;
      },
      headPortrait: function() {
        return this.$store.getters.contactInfo.headPortrait;
      },
      birthday: function() {
        return this.$store.getters.contactInfo.birthday;
      }
      // ...
    }

這樣確實(shí)實(shí)現(xiàn)了我的愿望,不用寫前綴。然而,如果屬性很多,computed屬性中這種形式重復(fù)的代碼會(huì)很多。通過觀察會(huì)發(fā)現(xiàn),它們有一個(gè)共性就是都是從 contactInfo 這個(gè) getter 上面取屬性,映射到一個(gè)同名的 computed 屬性上。于是,聯(lián)想到 mapGetters 函數(shù)自動(dòng)生成對(duì)象的做法,我們有理由相信可以寫這么一個(gè)函數(shù),遍歷 contactInfo 這個(gè) getter 上的所有屬性,生成一個(gè)對(duì)象直接使用,而無需手動(dòng)添加每一個(gè)屬性。

如果你知道 mapGetters 是干什么的話,一定知道它并不能解決我這個(gè)問題。但是我這個(gè)問題解決起來和 mapGetters 是類似的。我不知道vue 官方怎么沒有提供這樣一個(gè) helper 函數(shù)。

我自己解決這個(gè)問題遇到的困難是,無法訪問組件實(shí)例,代碼如下:

computed: (function() {
      let o = {};
      let contactInfo = this.$store.getters.contactInfo; // 這個(gè)this肯定不是組件實(shí)例
      for(k in contactInfo) {
        if (contactInfo.hasOwnProperty(k)) {
          o[k] = () => contactInfo[k];
        }
      }
      return o;
    }()),

所以我想問一下這個(gè)問題可以怎么解決,這種情況如何訪問組件實(shí)例?

回答
編輯回答
執(zhí)念

沒有解決辦法

2017年12月6日 00:56
編輯回答
我甘愿
computed: {
      info: function() {
        return this.$store.getters.contactInfo;
      },
      }
      
      使用 
      info.name 
      info.headPortrait
      
      這不就方便好多了
2017年12月19日 10:48