傻瓜式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 相关文章推荐
优化网页之快速的呈现我们的网页
Jun 29 Javascript
JavaScript中document对象使用详解
Jan 06 Javascript
Node.js中使用jQuery的做法
Aug 17 Javascript
jQuery网页定位导航特效实现方法
Dec 19 Javascript
javascript编程实现栈的方法详解【经典数据结构】
Apr 11 Javascript
实现两个文本框同时输入的实例
Sep 25 Javascript
浅谈Vue SSR 的 Cookies 问题
Nov 20 Javascript
vue项目常用组件和框架结构介绍
Dec 24 Javascript
Vue-cli3简单使用(图文步骤)
Apr 30 Javascript
微信小程序 select 下拉框组件功能
Sep 09 Javascript
详解JavaScript中的Object.is()与&quot;===&quot;运算符总结
Jun 17 Javascript
Vue中computed及watch区别实例解析
Aug 01 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
thinkphp5.1框架容器与依赖注入实例分析
2019/07/23 PHP
Laravel5.5 实现后台管理登录的方法(自定义用户表登录)
2019/09/30 PHP
获取Javscript执行函数名称的方法
2006/12/22 Javascript
jQuery 性能优化指南(3)
2009/05/21 Javascript
jquery 表单下所有元素的隐藏
2009/07/25 Javascript
javascript下4个跨浏览器必备的函数
2010/03/07 Javascript
基于jquery的网页SELECT下拉框美化代码
2010/10/28 Javascript
设置iframe的document.designMode后仅Firefox中其body.innerHTML为br
2012/02/27 Javascript
jquery中常用的SET和GET$(”#msg”).html循环介绍
2013/10/09 Javascript
在HTML代码中使用JavaScript代码的例子
2014/10/16 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形菜单
2015/11/30 Javascript
jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】
2016/09/20 Javascript
JS计算距当前时间的时间差实例
2017/12/29 Javascript
Vue组件的使用及个人理解与介绍
2019/02/09 Javascript
Vue项目vscode 安装eslint插件的方法(代码自动修复)
2020/04/15 Javascript
python通过post提交数据的方法
2015/05/06 Python
Python生成随机密码的方法
2017/06/16 Python
几个适合python初学者的简单小程序,看完受益匪浅!(推荐)
2019/04/16 Python
python将字符串list写入excel和txt的实例
2019/07/20 Python
python机器学习包mlxtend的安装和配置详解
2019/08/21 Python
通过python扫描二维码/条形码并打印数据
2019/11/14 Python
pytorch 实现在预训练模型的 input上增减通道
2020/01/06 Python
pytorch的梯度计算以及backward方法详解
2020/01/10 Python
python tkinter之 复选、文本、下拉的实现
2020/03/04 Python
css3 transform过渡抖动问题解决
2020/10/23 HTML / CSS
HTML5 CSS3打造相册效果附源码下载
2014/06/16 HTML / CSS
H5最强接口之canvas实现动态图形功能
2019/05/31 HTML / CSS
JAVA和C++区别都有哪些
2015/03/30 面试题
心得体会范文
2014/01/04 职场文书
人民教师的自我评价分享
2014/02/21 职场文书
初三语文教学计划
2015/01/22 职场文书
建筑技术负责人岗位职责
2015/04/13 职场文书
2015质检员个人年终工作总结
2015/10/23 职场文书
导游词之晋城蟒河
2019/12/12 职场文书
深入浅析Django MTV模式
2021/09/04 Python
MySQL 如何限制一张表的记录数
2021/09/14 MySQL