利用利用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