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


Posted in Javascript onDecember 21, 2018

前言

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS获取dom 对象 ajax操作 读写cookie函数
Nov 18 Javascript
js 判断checkbox是否选中的实现代码
Nov 23 Javascript
jquery+json实现分页效果
Mar 07 Javascript
分享JavaScript监听全部Ajax请求事件的方法
Aug 28 Javascript
移动端js图片查看器
Nov 17 Javascript
bootstrap快速制作后台界面
Dec 05 Javascript
knockoutjs模板实现树形结构列表
Jul 31 Javascript
jQuery EasyUI开发技巧总结
Sep 26 jQuery
vue项目打包部署到服务器的方法示例
Aug 27 Javascript
详解简单易懂的 ES6 Iterators 指南和示例
Sep 24 Javascript
Vue实现多标签选择器
Nov 28 Javascript
Vue项目打包编译优化方案
Sep 16 Javascript
vue项目设置scrollTop不起作用(总结)
Dec 21 #Javascript
浅谈Vue服务端渲染框架Nuxt的那些事
Dec 21 #Javascript
JS二级菜单不同实现方法分析【4种方法】
Dec 21 #Javascript
vue中eslintrc.js配置最详细介绍
Dec 21 #Javascript
angularjs http与后台交互的实现示例
Dec 21 #Javascript
JS执行控制之节流模式实例分析
Dec 21 #Javascript
vue favicon设置以及动态修改favicon的方法
Dec 21 #Javascript
You might like
全国FM电台频率大全 - 7 吉林省
2020/03/11 无线电
比较简单实用的PHP无限分类源码分享(思路不错)
2011/10/13 PHP
PHP魔术方法__GET、__SET使用实例
2014/11/25 PHP
PHP中set error handler函数用法小结
2015/11/11 PHP
WordPress中获取页面链接和标题的相关PHP函数用法解析
2015/12/17 PHP
php中通过eval实现字符串格式的计算公式
2017/03/18 PHP
ThinkPHP 模板引擎使用详解
2017/05/07 PHP
PHP图片水印类的封装
2017/07/06 PHP
如何通过View::first使用Laravel Blade的动态模板详解
2017/09/21 PHP
jQuery 源码分析笔记(7) Queue
2011/06/19 Javascript
zTree插件之多选下拉菜单实例代码
2013/11/06 Javascript
javascript实现 百度翻译 可折叠的分享按钮列表
2015/03/12 Javascript
TypeOf这些知识点你了解吗
2016/02/21 Javascript
客户端验证用户名和密码的方法详解
2016/06/16 Javascript
JavaScript浮点数及运算精度调整详解
2016/10/21 Javascript
使用JS和canvas实现gif动图的停止和播放代码
2017/09/01 Javascript
微信小程序实现页面浮动导航
2019/01/28 Javascript
p5.js码绘“跳动的小正方形”的实现代码
2019/10/22 Javascript
js实现限定区域范围拖拉拽效果
2020/11/20 Javascript
用Python编写web API的教程
2015/04/30 Python
python中range()与xrange()用法分析
2016/09/21 Python
浅谈python爬虫使用Selenium模拟浏览器行为
2018/02/23 Python
Python实现的朴素贝叶斯算法经典示例【测试可用】
2018/06/13 Python
Flask框架响应、调度方法和蓝图操作实例分析
2018/07/24 Python
Python3 串口接收与发送16进制数据包的实例
2019/06/12 Python
CSS3毛玻璃效果(blur)有白边问题的解决方法
2016/11/15 HTML / CSS
中国第一家杂志折扣订阅网:杂志铺
2016/08/30 全球购物
教师应聘个人求职信
2013/12/10 职场文书
年度考核自我评价
2014/01/25 职场文书
离职保密承诺书
2014/05/28 职场文书
银行求职自荐书
2014/06/25 职场文书
普通党员对照检查材料
2014/08/28 职场文书
公安机关起诉意见书
2015/05/20 职场文书
为什么你写的height:100%不起作用
2021/05/10 HTML / CSS
python 对图片进行简单的处理
2021/06/23 Python
i7 6700处理器相当于i5几代
2022/04/19 数码科技