利用Dectorator分模块存储Vuex状态的实现

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来扩展功能。