• 热门专题

关于语法糖类库kiss-vuex的一些简单介绍

作者:whl  发布日期:2018-12-26 08:34:00
Tag标签:傻瓜式vuex  语法糖类库  
  •   相信很多朋友对于kiss-vuex都不是很熟悉,甚至有些人都不知道它到底是什么东西,有什么作用。其实kiss-vuex就是一个十分简单的语法糖类库,对于数据通信方面具有比较重要的意义。今天小编特意整理了一部分资料,下面就给大家简单的介绍一下kiss-vuex,感兴趣的不如一起来看看吧!

      前言

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

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

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

      介绍

      kiss-vuex 是一个非常简单的语法糖类库,遵循软件工程里的 KISS 原则,仅仅暴露一个方法:Store。压缩版本仅仅只有 3KB,所以你可以放心加入到你的代码中。

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

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

    加入这样一个 js 文件

      OK,一个 store 就声明好了。What!? 这么简单吗?对,就是这么简单。

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

    原始的 store 的声明方式

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

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

      贴一段使用示例代码:

    示例代码

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

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

    声明 store

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

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

      作为普通函数使用

      作为装饰器使用

      额外配置

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

      babel

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

    使用了 babel

      并配置到 babel.config.js 中:

    配置到 babel.config.js

      如果你使用了 typescript,需要将 tsconfig.json 中的 compilerOptions.experimentalDecorators 这个属性值设置为 true。

    属性值设置为 true

      如果你偏爱 es5 环境,可以直接这么使用:

     es5 环境

      后记

      使用 kiss-vuex 能够大大减少 store 相关代码量,并提倡“先引入后使用”这种模式,能够很方便地进行维护和定位问题。有兴趣的同学可以自行去 github 中查看源码,思路也是非常巧妙的。

      上面这些内容就是今天给大家分享的关于语法糖类库kiss-vuex的一些简单介绍了,相信大家通过上面这些内容的学习对于kiss-vuex又有了更深入的了解吧?如果大家还想了解更多关于kiss-vuex的内容欢迎继续关注本站其他发文,小编这里就不一一进行讲解了。

延伸阅读:

About IT165 - 广告服务 - 隐私声明 - 版权申明 - 免责条款 - 网站地图 - 网友投稿 - 联系方式
本站内容来自于互联网,仅供用于网络技术学习,学习中请遵循相关法律法规