1、引言

在H5的Vue項目中，最為常見的當為單頁應用(SPA)，利用Vue-Router控制組件的掛載與復用，這時使用Vuex可以方便的維護數據狀態而不必關心組件間的數據通信。但在Weex中，不同的頁面之間使用不同的執行環境，無法共享數據，此時多為通過BroadcastChannel或storage模塊來實現數據通信，本文主要使用修飾器(Decorator)來擴展Vuex的功能，實現分模塊存儲數據，并降低與業務代碼的耦合度。

2、Decorator

設計模式中有一種裝飾器模式，可以在運行時擴展對象的功能，而無需創建多個繼承對象。類似的，Decorator可以在編譯時擴展一個對象的功能，降低代碼耦合度的同時實現多繼承一樣的效果。

2.1、Decorator安裝

目前Decorator還只是一個提案，在生產環境中無法直接使用，可以用babel-plugin-transform-decorators-legacy來實現。使用npm管理依賴包的可以執行以下命令：

npm install babel-plugin-transform-decorators-legacy -D

然后在 .babelrc 中配置

{  "plugins": [    "transform-decorators-legacy"  ]}

或者在webpack.config.js中配置

{  test: //.js$/,  loader: "babel-loader",  options: [    plugins: [      require("babel-plugin-transform-decorators-legacy").default    ]  ]}

這時可以在代碼里編寫Decorator函數了。

2.2、Decorator的編寫

在本文中，Decorator主要是對方法進行修飾，主要代碼如下：
decorator.js

const actionDecorator = (target, name, descriptor) => {  const fn = descriptor.value;  descriptor.value = function(...args) {    console.log('調用了修飾器的方法');    return fn.apply(this, args);  };  return descriptor;};

store.js

const module = {  state: () => ({}),  actions: {    @actionDecorator    someAction() {/** 業務代碼 **/ },  },};

可以看到，actionDecorator修飾器的三個入參和Object.defineProperty一樣，通過對module.actions.someAction函數的修飾，實現在編譯時重寫someAction方法，在調用方法時，會先執行console.log('調用了修飾器的方法');，而后再調用方法里的業務代碼。對于多個功能的實現，比如存儲數據，發送廣播，打印日志和數據埋點，增加多個Decorator即可。

3、Vuex

Vuex本身可以用subscribe和subscribeAction訂閱相應的mutation和action，但只支持同步執行，而Weex的storage存儲是異步操作，因此需要對Vuex的現有方法進行擴展，以滿足相應的需求。

3.1、修飾action

在Vuex里，可以通過commit mutation或者dispatch action來更改state，而action本質是調用commit mutation。因為storage包含異步操作，在不破壞Vuex代碼規范的前提下，我們選擇修飾action來擴展功能。