前言
vuex 作为 vue 框架状态数据管理模块，诞生已有些许年头，它的出现很好地解决了兄弟组件响应式状态数据通信的问题。但是，vuex 的学习是一定门槛的，同时其声明和使用方式有一些不够简洁。一般情况下，我们会使用 new Vue({store})这种方式注入 Store，在组件中使用很 mapGetters 或 mapActions 等来引入 getters 和 actions 等，但随着项目状态数据增长，你会发觉越来越难以维护，因为这些数据和方法都太过分散。
看到这里，如果你还是不懂 vuex 是何物，或者你已经使用了 vuex 但是很不习惯它的用法，没有关系，你可以继续阅读本篇。实际上，在引入了 kiss-vuex 后，你甚至并不需要深刻理解 vuex 就能够很好地使用它。
如果有糖和白水，你会作何选择？我会选择把糖放入白水，味道更为完美。
介绍
kiss-vuex 是一个非常简单的语法糖类库，遵循软件工程里的 KISS 原则，仅仅暴露一个方法：Store。压缩版本仅仅只有 3KB，所以你可以放心加入到你的代码中。此处贴出几个有用的链接：
NPM
文档·中文
Github
安装和使用
通过 npm ：
$ npm i kiss-vuex注意：需要先行安装 vue 和 vuex。
在你的代码中，可以加入这样一个 js 文件：
// appStore.js
import { Store } from 'kiss-vuex';@Store
class AppStore {
counter = 0;
}
const appStore = new AppStore();
export { AppStore, appStore }
OK，一个 store 就声明好了。What!? 这么简单吗？对，就是这么简单。
我们对比下原始的 store 的声明方式：
import Vuex from 'vuex';const appStore = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
},
actions: {
increment (context) {
context.commit('increment')
}
}
});
export { appStore }
怎么样，是否有很明显的差别？
kiss-vuex 提供了一种极为简洁的声明方式，通过 Store 装饰器，你能够快速获得一个 Store 类，然后实例化导出。在你需要使用到的地方将这个 store 引入，加入到组件的 computed 属性下。
贴一段使用示例代码：
// hello.component.js
import Vue from 'vue';
import { appStore } from './AppStore';export default Vue.component('app-hello', {
template:
`<div>
<p>Click times: {{counter}}</p>
<button @click="doClick()">add counter</button>
</div>`,
computed: {
counter() {
return appStore.counter;
