傻瓜式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 相关文章推荐
了解jQuery技巧来提高你的代码(个人觉得那个jquery的手册很不错)
Feb 10 Javascript
JavaScript取得鼠标绝对位置程序代码介绍
Sep 16 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器(优化篇)
Jun 28 Javascript
Javascript 实现图片无缝滚动
Dec 19 Javascript
Javascript中实现trim()函数的两种方法
Feb 04 Javascript
jquery地址栏链接与a标签链接匹配之特效代码总结
Aug 24 Javascript
JS实现网页上随滚动条滚动的层效果代码
Nov 04 Javascript
jquery mobile界面数据刷新的实现方法
May 28 Javascript
js 显示日期时间的实例(时间过一秒加1)
Oct 25 Javascript
ES6学习笔记之map、set与数组、对象的对比
Mar 01 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【凹多边形的分离轴检测算法】
Dec 13 Javascript
vue实现搜索功能
May 28 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
利用PHP动态生成VRML网页
2006/10/09 PHP
解析PHP处理换行符的问题 \r\n
2013/06/13 PHP
PHP中实现接收多个name相同但Value不相同表单数据实例
2015/02/03 PHP
php面向对象编程self和static的区别
2016/05/08 PHP
PHP封装的XML简单操作类完整实例
2017/11/13 PHP
Javascript面向对象编程(三) 非构造函数的继承
2011/08/28 Javascript
Kibo 用于处理键盘事件的Javascript工具库
2011/10/28 Javascript
javascript学习(二)javascript常见问题总结
2013/01/02 Javascript
web css实现整站样式互相切换
2013/10/29 Javascript
仿JQuery输写高效JSLite代码的一些技巧
2015/01/13 Javascript
Bootstrap每天必学之轮播(Carousel)插件
2016/04/25 Javascript
jQuery代码性能优化的10种方法
2016/06/21 Javascript
浅析JavaScript函数的调用模式
2016/08/10 Javascript
BootStrap table表格插件自适应固定表头(超好用)
2016/08/24 Javascript
jQuery实现移动端手机商城购物车功能
2016/09/24 Javascript
Javascript 普通函数和构造函数的区别
2016/11/05 Javascript
JS库之Waypoints的用法详解
2017/09/13 Javascript
跟混乱的页面弹窗说再见
2019/04/11 Javascript
微信小程序实现分享商品海报功能
2019/09/30 Javascript
[49:42]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第一局
2016/03/04 DOTA
python发腾讯微博代码分享
2014/01/10 Python
Python中利用sqrt()方法进行平方根计算的教程
2015/05/15 Python
python并发2之使用asyncio处理并发
2017/12/21 Python
pytorch: tensor类型的构建与相互转换实例
2018/07/26 Python
Python函数基本使用原理详解
2020/03/19 Python
Keras设置以及获取权重的实现
2020/06/19 Python
django ObjectDoesNotExist 和 DoesNotExist的用法
2020/07/09 Python
python模块内置属性概念及实例
2021/02/18 Python
html5实现九宫格抽奖可固定抽中某项奖品
2020/06/15 HTML / CSS
单位成立周年感言
2014/01/26 职场文书
八项规定整改方案
2014/02/21 职场文书
广告设计应届生求职信
2014/03/01 职场文书
幼儿教师2014年度工作总结
2014/12/16 职场文书
学雷锋团日活动总结
2015/05/06 职场文书
Oracle 临时表空间SQL语句的实现
2021/09/25 Oracle
Python if else条件语句形式详解
2022/03/24 Python