傻瓜式vuex语法糖kiss-vuex整理
前言
vuex 作为 vue 框架状态数据管理模块，诞生已有些许年头，它的出现很好地解决了兄弟组件响应式状态数据通信的问题。但是，vuex 的学习是一定门槛的，同时其声明和使用方式有一些不够简洁。一般情况下，我们会使用 new vue({store})这种方式注入 store，在组件中使用很 mapgetters 或 mapactions 等来引入 getters 和 actions 等，但随着项目状态数据增长，你会发觉越来越难以维护，因为这些数据和方法都太过分散。
看到这里，如果你还是不懂 vuex 是何物，或者你已经使用了 vuex 但是很不习惯它的用法，没有关系，你可以继续阅读本篇。实际上，在引入了 kiss-vuex 后，你甚至并不需要深刻理解 vuex 就能够很好地使用它。
如果有糖和白水，你会作何选择？我会选择把糖放入白水，味道更为完美。
介绍
kiss-vuex 是一个非常简单的语法糖类库，遵循软件工程里的 kiss 原则，仅仅暴露一个方法：store。压缩版本仅仅只有 3kb，所以你可以放心加入到你的代码中。此处贴出几个有用的链接：
安装和使用
通过 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;
}
},
methods: {
doclick() {
appstore.counter++;
}
}
})
如果你有使用 angular2+ 的经验，不难看出 kiss-vuex 里的 @store 与 angular 中的 @service 十分类似。事实上，kiss-vuex 正是借鉴了这种模式，在未来的 vue3.0+ 版本中，也会有类似的语法特性。
当然，你依然可以使用函数调用的方式来声明 store：
// appstore.js
import { store } from 'kiss-vuex';
// @store
// class appstore {
// counter = 0;
// }
const appstore = store({
counter: 0
});
export { appstore }
引入的话就和上述示例中一样了。
另外，还有几个线上实例可供参考：
额外配置
上述 @store 这种使用方式是基于 es 中的装饰器语法以及类属性语法，而目前装饰器和类属性都处于草案状态，所以需要让你的开发环境支持这些语法特性，你需要做一些额外配置。
babel
如果你使用了 babel，需要安装 @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties 两个插件：
$ npm i -d @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties
并配置到 babel.config.js 中：
module.exports = {
plugins: [
["@babel/plugin-proposal-decorators", { legacy: true }],
["@babel/plugin-proposal-class-properties", { loose: false }]
],
presets: [
[
"@babel/env",
{
modules: false
}
]
]
};
typescript
如果你使用了 typescript，需要将 tsconfig.json 中的 compileroptions.experimentaldecorators 这个属性值设置为 true。
{
"compileroptions": {
"experimentaldecorators": true
}
}
es5
如果你偏爱 es5 环境，可以直接这么使用：
<body>
<script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>
<script type="text/javascript" src="./node_modules/vuex/dist/vuex.min.js"></script>
<script type="text/javascript" src="./node_modules/vuex/dist/kiss-vuex.min.js"></script>
<script type="text/javascript">
var appstore = kissvuex.store({
counter: 0
});
// 添加你的其余自定义代码
</script>
</body>
后记
使用 kiss-vuex 能够大大减少 store 相关代码量，并提倡“先引入后使用”这种模式，能够很方便地进行维护和定位问题。有兴趣的同学可以自行去 github 中查看源码，思路也是非常巧妙的。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。