}
},
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 中查看源码，思路也是非常巧妙的。
