如何通过Decorator模块化实现Vuex状态的长尾词存储？

本文共计1653个文字，预计阅读时间需要7分钟。

在H5项目中，Vue作为常见的单页应用（SPA）框架，常用Vue-Router来控制组件的挂载与复用。此时，Vuex可以方便地维护数据状态，而不必过多关注组件间的数据通信。然而，在Weex中，情况则有所不同，页面间的处理方式各异。

1、引言

在H5的Vue项目中，最为常见的当为单页应用(SPA)，利用Vue-Router控制组件的挂载与复用，这时使用Vuex可以方便的维护数据状态而不必关心组件间的数据通信。但在Weex中，不同的页面之间使用不同的执行环境，无法共享数据，此时多为通过BroadcastChannel或storage模块来实现数据通信，本文主要使用修饰器(Decorator)来扩展Vuex的功能，实现分模块存储数据，并降低与业务代码的耦合度。

2、Decorator

设计模式中有一种装饰器模式，可以在运行时扩展对象的功能，而无需创建多个继承对象。类似的，Decorator可以在编译时扩展一个对象的功能，降低代码耦合度的同时实现多继承一样的效果。

2.1、Decorator安装

目前Decorator还只是一个提案，在生产环境中无法直接使用，可以用babel-plugin-transform-decorators-legacy来实现。