傻瓜式vuex语法糖kiss-vuex整理

　　

　　

　　

vuex作为vue框架状态数据管理模块,诞生已有些许年头,它的出现很好地解决了兄弟组件响应式状态数据通信的问题。但是,vuex的学习是一定门槛的,同时其声明和使用方式有一些不够简洁。一般情况下,我们会使用新vue({商店})这种方式注入店,在组件中使用很mapGetters或mapActions等来引入getter和行动等,但随着项目状态数据增长,你会发觉越来越难以维护,因为这些数据和方法都太过分散。
　　

　　

看到这里,如果你还是不懂vuex是何物,或者你已经使用了vuex但是很不习惯它的用法,没有关系,你可以继续阅读本篇。实际上,在引入了kiss-vuex后,你甚至并不需要深刻理解vuex就能够很好地使用它。

　　

如果有糖和白水,你会作何选择?我会选择把糖放入白水,味道更为完美。

　　

　　

　　

kiss-vuex是一个非常简单的语法糖类库,遵循软件工程里的吻原则,仅仅暴露一个方法:商店。压缩版本仅仅只有3 kb,所以你可以放心加入到你的代码中。此处贴出几个有用的链接:

　　

NPM
　　文档·中文
　　Github

　　

　　

　　

通过npm:
　　

　　 　　 　　美元npm我kiss-vuex 　　 　　

注意:需要先行安装vue和vuex。

　　

在你的代码中,可以加入这样一个js文件:
　　

　　 　　//appStore.js 　　从“kiss-vuex”进口{商店}; 　　 　　@Store 　　类应用商店{ 　　counter=0; 　　} 　　 　　const appStore=new应用商店(); 　　 　　出口{应用商店中,应用商店} 　　 　　

好的,一个商店就声明好了。! & # 63;这么简单吗?对,就是这么简单。
　　

　　

我们对比下原始的商店的声明方式:
　　

　　 　　 　　从“进口Vuex Vuex '; 　　 　　const appStore=new Vuex.Store ({ 　　状态:{ 　　数:0 　　}， 　　突变:{ 　　增量(状态){ 　　state.count + + 　　} 　　}， 　　行动:{ 　　增量(上下文){ 　　context.commit(“增量”) 　　} 　　} 　　}）; 　　 　　出口{应用商店} 　　 　　

怎么样,是否有很明显的差别?
　　

　　

kiss-vuex提供了一种极为简洁的声明方式,通过商店装饰器,你能够快速获得一个存储类,然后实例化导出。在你需要使用到的地方将这个商店引入,加入到组件的计算属性下。
　　

　　

贴一段使用示例代码:
　　

　　 　　//hello.component.js 　　从“进口Vue Vue '; 　　从”。进口{应用商店}/应用商店'; 　　 　　出口默认Vue.component (app-hello, { 　　模板: 　　“& lt; div> 　　& lt; p>点击:{{柜台}}& lt;/p> 　　& lt;按钮@click=" doClick()在添加counter 　　& lt;/div>” 　　计算:{ 　　计数器(){ 　　返回appStore.counter; 　　} 　　}， 　　方法:{ 　　doClick () { 　　appStore.counter + +; 　　} 　　} 　　}) 　　 　　之前 　　 　　

如果你有使用Angular2 +的经验,不难看出kiss-vuex里的@Store与角中的@ service十分类似。事实上,kiss-vuex正是借鉴了这种模式,在未来的vue3.0 +版本中,也会有类似的语法特性。
　　

　　

当然,你依然可以使用函数调用的方式来声明商店:
　　

　　 　　//appStore.js 　　从“kiss-vuex”进口{商店};//@Store//类应用商店{//计数器=0;//} 　　 　　const appStore=商店({ 　　柜台:0 　　}）; 　　 　　出口{应用商店} 　　 　　之前 　　 　　

引入的话就和上述示例中一样了。
　　

　　

另外,还有几个线上实例可供参考:

　　

作为普通函数使用
　　作为装饰器使用

　　

<>强额外配置
　　

　　

上述@Store这种使用方式是基于es中的装饰器语法以及类属性语法,而目前装饰器和类属性都处于草案状态,所以需要让你的开发环境支持这些语法特性,你需要做一些额外配置。

　　

<>强巴别塔
　　

　　

如果你使用了巴别塔,需要安装@babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties两个插件:
　　

　　 　　 　　美元npm i - d @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties 　　之前 　　 　　

并配置到babel.config。js中:
　　

　　 　　 　　模块。出口={ 　　插件:[ 　　[" @babel/plugin-proposal-decorators ",{遗产:真}), 　　[" @babel/plugin-proposal-class-properties ",{:假}] 　　), 　　预设:[ 　　( 　　“@babel/env”, 　　{ 　　模块:假 　　} 　　] 　　] 　　}; 　　

傻瓜式vuex语法糖kiss-vuex整理