傻瓜式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 validate 自定义验证方法介绍 日期验证
Feb 27 Javascript
js之ActiveX控件使用说明 new ActiveXObject()
Mar 03 Javascript
纯javascript模仿微信打飞机小游戏
Aug 20 Javascript
JS实现的不规则TAB选项卡效果代码
Sep 18 Javascript
浅谈angularjs module返回对象的坑(推荐)
Oct 21 Javascript
Angular中ng-bind和ng-model的区别实例详解
Apr 10 Javascript
微信小程序实现图片懒加载的示例代码
Dec 13 Javascript
vue 项目中使用Loading组件的示例代码
Aug 31 Javascript
了解在JavaScript中将值转换为字符串的5种方法
Jun 06 Javascript
JAVA面试题 static关键字详解
Jul 16 Javascript
封装微信小程序http拦截器过程解析
Aug 13 Javascript
JavaScript实现简单的图片切换功能(实例代码)
Apr 10 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 Web木马扫描器代码分享
2015/09/06 PHP
简单谈谈php浮点数精确运算
2016/03/10 PHP
CheckBox 如何实现全选?
2006/06/23 Javascript
jQuery 性能优化指南(2)
2009/05/21 Javascript
跨浏览器通用、可重用的选项卡tab切换js代码
2011/09/20 Javascript
jquery 插件学习(四)
2012/08/06 Javascript
jQuery的css() 方法使用指南
2015/05/03 Javascript
基于jQuery实现的向下滑动二级菜单效果代码
2015/08/31 Javascript
AngularJS基础 ng-model-options 指令简单示例
2016/08/02 Javascript
学习Javascript闭包(Closure)知识
2016/08/07 Javascript
原生JS实现图片轮播效果
2016/12/26 Javascript
Javascript操作dom对象之select全面解析
2017/04/24 Javascript
从setTimeout看js函数执行过程
2017/12/19 Javascript
详解vuex commit保存数据技巧
2018/12/25 Javascript
JavaScript中的&quot;=、==、===&quot;区别讲解
2019/01/22 Javascript
详解vue-cli3多页应用改造
2019/06/04 Javascript
JavaScript实现复选框全选和取消全选
2020/11/20 Javascript
使用IPython下的Net-SNMP来管理类UNIX系统的教程
2015/04/15 Python
新手如何快速入门Python(菜鸟必看篇)
2017/06/10 Python
对Python 数组的切片操作详解
2018/07/02 Python
Python自动抢红包教程详解
2019/06/11 Python
在PyTorch中Tensor的查找和筛选例子
2019/08/18 Python
python带参数打包exe及调用方式
2019/12/21 Python
解决python cv2.imread 读取中文路径的图片返回为None的问题
2020/06/02 Python
详解python安装matplotlib库三种失败情况
2020/07/28 Python
HTML5 Canvas玩转酷炫大波浪进度图效果实例(附demo)
2016/12/14 HTML / CSS
英国女鞋购物网站:Moda in Pelle
2019/02/18 全球购物
XML文档面试题
2015/08/05 面试题
EJB timer的种类
2014/10/28 面试题
IBatis持久层技术
2016/07/18 面试题
质量安全标语
2014/06/07 职场文书
圣诞节活动策划方案
2014/06/09 职场文书
区域销售主管岗位职责
2014/06/15 职场文书
运动会主持人开幕词
2016/03/04 职场文书
成功的商业计划书这样写才最靠谱
2019/07/12 职场文书
导游词之江南周庄
2019/12/06 职场文书