vuex

如何管理 vue 項(xiàng)目的數(shù)據(jù)？這個(gè)問(wèn)題似乎早已經(jīng)有答案了，無(wú)非就是使用 vuex ，全局 store，整個(gè)應(yīng)用維護(hù)一個(gè)超大的 Object，界面的顯示情況隨著超大 Object 的變化而變化。

看起來(lái)很簡(jiǎn)單，不就維護(hù)一個(gè) Object 嘛，實(shí)際上，要想組織好數(shù)據(jù)這塊代碼，必須事先對(duì)項(xiàng)目的數(shù)據(jù)結(jié)構(gòu)理解得非常透徹，然后像設(shè)計(jì)數(shù)據(jù)庫(kù)表一樣把各個(gè) module 的樣子設(shè)計(jì)出來(lái)。實(shí)際上，個(gè)人覺(jué)得設(shè)計(jì) vuex 的 module 比設(shè)計(jì)數(shù)據(jù)庫(kù)表復(fù)雜得多：

• 1、像數(shù)據(jù)庫(kù)一樣設(shè)計(jì)各個(gè)業(yè)務(wù)實(shí)體的外貌，這部分設(shè)計(jì)難度應(yīng)該和數(shù)據(jù)庫(kù)表設(shè)計(jì)差不多；
• 2、維護(hù)一堆 ajax 請(qǐng)求狀態(tài)；
• 3、如何優(yōu)雅地復(fù)用 module。比如有一個(gè) PersonListModule，在一個(gè)頁(yè)面上有兩處要用到 PersonListModule 中的列表數(shù)據(jù)：一個(gè)是要在表格控件里面展示，一個(gè)是要在下拉控件里面展示，每個(gè)控件中展示的列表數(shù)據(jù)篩選條件不一樣；
• 4、如何同步 vuex 中的數(shù)據(jù)和服務(wù)器端數(shù)據(jù)。vuex 的超大 Object 可以看做服務(wù)器端數(shù)據(jù)在客戶端內(nèi)存中的一個(gè)緩存，怎么設(shè)計(jì)這個(gè)緩存的同步策略？

對(duì)于3、4兩個(gè)問(wèn)題，結(jié)合起來(lái)更恐怖：同步服務(wù)器端數(shù)據(jù)到 PersonListModule 的同時(shí)，還要考慮如何從 PersonListModule 中篩選出分頁(yè)數(shù)據(jù)到頁(yè)面展示，還要篩選出多個(gè)列表，還要考慮在什么時(shí)機(jī)重新更新“緩存”，想想就頭大。

假設(shè)我們能力很強(qiáng)大，設(shè)計(jì)出了能完美應(yīng)對(duì)上述問(wèn)題的 store 方案，還有一個(gè)大問(wèn)題攔著我們呢：如何保證這套設(shè)計(jì)的可擴(kuò)展性？因?yàn)闃I(yè)務(wù)系統(tǒng)變化多端，不知道什么時(shí)候產(chǎn)品經(jīng)理又有新想法了，我們得設(shè)計(jì)能很好地應(yīng)對(duì)變化多端的需求嗎？

為什么這么難？問(wèn)題究竟出現(xiàn)在哪里？

vuex 的思維模式主要是從數(shù)據(jù)著手，由數(shù)據(jù)推導(dǎo)出界面的樣子，這就需要先設(shè)計(jì)好 store 結(jié)構(gòu)了。要設(shè)計(jì)好 store 結(jié)構(gòu)，目測(cè)必須具備如下特質(zhì)的工程師才能做好：

• 1、對(duì)項(xiàng)目業(yè)務(wù)了解非常深入；
• 2、具備超強(qiáng)的抽象思維能力；
• 3、經(jīng)驗(yàn)豐富，能盡量想到設(shè)計(jì)出的 store 結(jié)構(gòu)能應(yīng)付哪些情況、不能應(yīng)付哪些情況。

第2條的門檻實(shí)在是太高了，能做到的前端工程師估計(jì)沒(méi)多少。

怎么辦？

我們不應(yīng)該從數(shù)據(jù)推導(dǎo)出界面，而應(yīng)該從界面推導(dǎo)出數(shù)據(jù)，逐層抽象。

比如現(xiàn)在要仿一個(gè)新浪微博首頁(yè)，頁(yè)面上主要包含的數(shù)據(jù)有：分組信息、微博列表、個(gè)人信息、一些推薦信息等，那么就設(shè)計(jì)一個(gè)只針對(duì)該頁(yè)面的 module ，大致結(jié)構(gòu)為：

const homePageModule = {
  state: {
    groupList: [{
        id: 1,
        name: '名人明星',
        unread: 1
      },
      {
        id: 2,
        name: '同事',
        unread: 0
      }
    ],
    groupListExtraInfo: {
      // 初始顯示多少個(gè)小組
      initShowCount: 5,
      loading: true
    },
    weiboList: [{
      id: 1,
      content: '<p>震驚部</p>',
      author: 'yibuyisheng',
      createTime: '20170719234422'
    }],
    weiboListPageInfo: {
      loadingStatus: 'QUITE', // 三種取值：QUITE -> 沒(méi)有加載；UP -> 向上加載；DOWN -> 向下加載
      // weiboList 的開始時(shí)間，可用這個(gè)時(shí)間戳做下一次的向上加載
      startTime: '20170719234422',
      // weiboList 的結(jié)束時(shí)間，可用這個(gè)時(shí)間戳做下一次的向下加載
      endTime: '20170719234422'
    },
    self: {
      id: 1,
      nickname: 'yibuyisheng',
      email: 'yibuyisheng@163.com',
      avatar: 'http://weibo.com/2674779523/profile?rightmod=1&wvr=6&mod=personinfo',
      followedCount: 405,
      followerCount: 235,
      weiboCount: 1321
    },
    recommendMovies: [
      ...
    ],
    recommendTopics: [
      ...
    ]
    ...
  },
  mutations: {
    updateWeiboList(state, list) {
      ...
    }
  },
  actions: {
    appendWeiboList() {
      ...
    },
    prependWeiboList() {
      ...
    }
  }
};

針對(duì)這個(gè)頁(yè)面，這個(gè)結(jié)構(gòu)，各個(gè)處理邏輯就具體化、特殊化了，代碼寫起來(lái)非常輕松。

代碼復(fù)用？

假設(shè)現(xiàn)在有個(gè)小組頁(yè)面，點(diǎn)進(jìn)去后可以看到該小組所有成員發(fā)的微博，因?yàn)槭且粋€(gè)新的頁(yè)面，所以需要新起一個(gè) module ，這也意味著要重復(fù)寫一遍 weiboList 相關(guān)的代碼，豈不蛋疼！

此時(shí)可以考慮寫一個(gè) createWeiboListModule() 函數(shù)，用于創(chuàng)建這種通用 module ，然后再寫一個(gè) mergeModules() 函數(shù)，把 createWeiboListModule() 函數(shù)創(chuàng)建出來(lái)的 module 對(duì)象和各頁(yè)面特殊的 module 合并起來(lái)，樣子看起來(lái)大致是這樣：

mergeModules(createWeiboListModule(), {
  state: {
    ...
  },
  mutations: {
    ...
  },
  actions: {
    ...
  }
});

遇到需要復(fù)用的才抽取通用邏輯，很自然，很簡(jiǎn)單。

怎么結(jié)合 vue 組件？

上面的結(jié)構(gòu)有一個(gè)很大的問(wèn)題，就是不能很好地和 vue 組件結(jié)合。比如，要讓微博首頁(yè)和分組頁(yè)面中的微博列表能復(fù)用 weiboList 相關(guān)代碼，那么 weiboList 涉及到的 state、action、mutation、getter 的命名都要盡量保持一致，不然就要傳一個(gè) nameMap（命名映射）給兩個(gè)頁(yè)面通用的 WeiboListComponent 組件，看起來(lái)就像這樣：

<weibo-list-component :name-map="{weiboList: 'homePageWeiboList'}"></weibo-list-component>

簡(jiǎn)直蛋疼！

好吧，那就嚴(yán)格約束這兩個(gè)頁(yè)面的 state、action、mutation、getter 命名都保持一致吧！

簡(jiǎn)直超級(jí)蛋疼！

此時(shí)可以考慮用 namespace 來(lái)解決這個(gè)問(wèn)題，比如上面的 homePageModule 可以把 weiboList 拆分出來(lái)：

const store = new vuex.Store({
  ...,

  modules: {
    'page:home': {
      state: {
        groupList: [{
            id: 1,
            name: '名人明星',
            unread: 1
          },
          {
            id: 2,
            name: '同事',
            unread: 0
          }
        ],
        groupListExtraInfo: {
          // 初始顯示多少個(gè)小組
          initShowCount: 5,
          loading: true
        },
        self: {
          id: 1,
          nickname: 'yibuyisheng',
          email: 'yibuyisheng@163.com',
          avatar: 'http://weibo.com/2674779523/profile?rightmod=1&wvr=6&mod=personinfo',
          followedCount: 405,
          followerCount: 235,
          weiboCount: 1321
        },
        recommendMovies: [
          ...
        ],
        recommendTopics: [
            ...
          ]
          ...
      },
    },
    'page:home:weiboList': createWeiboListModule(...)
  }

  ...
});

這樣一來(lái)，只要給 vue 組件傳一個(gè) namespace 參數(shù)就行了：

<weibo-list-component namespace="page:home:weiboList"></weibo-list-component>

嗯，看起來(lái)挺好的！

如何處理“store 緩存”？

可以在上一個(gè)問(wèn)題解決的基礎(chǔ)上，加上緩存功能，目測(cè)有大把現(xiàn)成的緩存策略可以參考（服務(wù)器端都玩兒爛了），由于絕大部分系統(tǒng)并不需要這層緩存功能，所以此處不贅述。

就這樣了嗎？

上述方案，思維方向的確是導(dǎo)致最后執(zhí)行起來(lái)輕松了很多，從具體到抽象的過(guò)程，很自然，符合思考習(xí)慣。但是最終的代碼還是會(huì)很容易搞得很亂的：

• 1、mergeModules() 要照顧各種合并策略；
• 2、createXXXModule() 方法會(huì)抽出很多層。比如可以從 createWeiboListModule() 抽出來(lái) createContinuousListModule() ，用于構(gòu)造通用的具備“向前向后”加載能力的列表 Module，最終可能會(huì)形成一條常常的“繼承鏈”，需要自己去定義維護(hù)這套繼承邏輯，心累。

其實(shí)上面兩條一看，就知道有現(xiàn)成的解決方案了： class。

參考此處實(shí)現(xiàn)：https://github.com/yibuyisheng/vuex-model/blob/master/src/store/BaseModule.js （代碼還在完善中）。

具體業(yè)務(wù)代碼寫起來(lái)就像是這樣了：

class ContinuousList extends BaseModule {
    state = {
        list: [],
        pageInfo: {
            loadingStatus: 'QUITE',
            startTime: '20170720003939',
            endTime: '20170720003939'
        }
    }
    
    @action
    async appendList(...) { 
        ...
        const result = await request('some url', params);
        this.updateList(result.list);
        ...
    }
    
    @action
    prependList(...) { ... }
}

class WeiboList extends ContinuousList {
    
    @action
    async voteUp(...) {
        ...
        await request('some url', params);
        const weiboDetail = await updateWeibo('some url', params.weiboId);
        const newList = this.state.list.map((wb) => {
            return wb.id === weiboDetail.id ? weiboDetail : wb;
        });
        this.updateList(newList);
        ...
    }
}

@composition(WeiboList)
class HomePage extends BaseModule {

    $namespace = 'page:home:';
    
    ...
    @action
    requestRecommendInfo(...) {
        ...
    }
    ...
}

HomePage.register();

在對(duì)應(yīng)的 HomePage.vue 里面，大致是這樣：

<template>
    <div class="home-page-view">
        ...
        <weibo-list-component namespace="page:home:weiboList"></weibo-list-component>
        ...
    </div>
</template>
<script>
export default {
    created() {
        ...
        const constants = this.getConstants('page:home');
        this.$store.dispatch(constants.REQUEST_RECOMMEND_INFO, params);
        ...
    }
};
</script>

而 WeiboListComponent 組件大致是這樣：

<template>
    <div class="weibo-list-component">
        ...
    </div>
</template>
<script>
export default {
    props: {
        namespace: {
            type: String,
            required: true
        }
    },
    computed: {
        weiboList() {
            const constants = this.getConstants(this.namespace);
            return this.$store.getters[constants.LIST];
        }
    },
    created() {
        ...
        const constants = this.getConstants(this.namespace);
        this.$store.dispatch(constants.APPEND_LIST, params);
        ...
    }
};
</script>

總結(jié)

其實(shí)就是換一種思路：從界面推導(dǎo)數(shù)據(jù)，從具體到抽象。