傻瓜式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 相关文章推荐
Javascript中eval函数的使用方法与示例
Apr 09 Javascript
JS 面向对象的5钟写法
Jul 31 Javascript
jQuery 获取对象 根据属性、内容匹配, 还有表单元素匹配
May 31 Javascript
javascript 折半查找字符在数组中的位置(有序列表)
Dec 09 Javascript
JavaScript中去掉数组中的重复值的实现方法
Aug 03 Javascript
圣诞节Merry Christmas给博客添加浪漫的下雪效果基于jquery实现
Dec 27 Javascript
判断及设置浏览器全屏模式
Apr 20 Javascript
JQuery控制DIV的选取实现方法
Sep 18 Javascript
微信小程序 数组中的push与concat的区别
Jan 05 Javascript
jQuery Easyui Treegrid实现显示checkbox功能
Aug 08 jQuery
Layui事件监听的实现(表单和数据表格)
Oct 17 Javascript
微信小游戏中three.js离屏画布的示例代码
Oct 12 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
常用表单验证类,有了这个,一般的验证就都齐了。
2006/12/06 PHP
shell脚本作为保证PHP脚本不挂掉的守护进程实例分享
2013/07/15 PHP
phalcon框架使用指南
2016/02/23 PHP
PHP函数按引用传递参数及函数可选参数用法示例
2018/06/04 PHP
PHP文件打开关闭及读写操作示例解析
2020/08/06 PHP
javascript数字数组去重复项的实现代码
2010/12/30 Javascript
eclipse如何忽略js文件报错(附图)
2013/10/30 Javascript
JavaScript导出Excel实例详解
2014/11/25 Javascript
jQuery浏览器CSS3特写兼容实例
2015/01/19 Javascript
自定义百度分享的分享按钮
2015/03/18 Javascript
javascript实现模拟时钟的方法
2015/05/13 Javascript
jQuery实现移动端滑块拖动选择数字效果
2015/12/24 Javascript
原生js实现类似fullpage的单页/全屏滚动
2017/01/22 Javascript
JS和canvas实现俄罗斯方块
2017/03/14 Javascript
ES6中箭头函数的定义与调用方式详解
2017/06/02 Javascript
webpack-dev-server自动更新页面方法
2018/02/22 Javascript
代码详解javascript模块加载器
2018/03/04 Javascript
浅谈Vue.js 关于页面加载完成后执行一个方法的问题
2019/04/01 Javascript
vue实现购物车小案例
2019/09/27 Javascript
webpack安装配置与常见使用过程详解(结合vue)
2020/06/01 Javascript
[06:25]第二届DOTA2亚洲邀请赛主赛事第二天比赛集锦.mp4
2017/04/03 DOTA
Python封装shell命令实例分析
2015/05/05 Python
pandas把dataframe转成Series,改变列中值的类型方法
2018/04/10 Python
Python笔记之代理模式
2019/11/20 Python
numpy.linalg.eig() 计算矩阵特征向量方式
2019/11/29 Python
python装饰器使用实例详解
2019/12/14 Python
CSS3中颜色线性渐变实战
2015/07/18 HTML / CSS
进程的查看和调度分别使用什么命令
2015/03/25 面试题
飞利信loadrunner和软件测试笔试题
2012/09/22 面试题
新员工培训个人的自我评价
2013/10/09 职场文书
2014年中秋节活动总结
2014/08/29 职场文书
群众路线对照检查材料思想汇报怎么写
2014/09/18 职场文书
2015年七一建党节演讲稿
2015/03/19 职场文书
2015圣诞节贺卡寄语
2015/03/24 职场文书
Java中Dijkstra(迪杰斯特拉)算法
2022/05/20 Java/Android
MySQL的意向共享锁、意向排它锁和死锁
2022/07/15 MySQL