小程序为何这么火_傻瓜式vuex语法糖kiss

日期:2021-01-08 类型:行业动态 

关键词:小程序怎么做,凡科网小程序,微信小程序界面,线上报名小程序,微信小程序页面制作

傻瓜式vuex语法糖kiss-vuex整理       kiss-vuex 是一个非常简单的语法糖类库,这篇文章主要介绍了傻瓜式vuex语法糖kiss-vuex整理,非常具有实用价值,需要的朋友们下面随着小编来一起学习学习吧

vuex 作为 vue 框架状态数据管理模块,诞生已有些许年头,它的出现很好地解决了兄弟组件响应式状态数据通信的问题。但是,vuex 的学习是一定门槛的,同时其声明和使用方式有一些不够简洁。一般情况下,我们会使用 new Vue({store})这种方式注入 Store,在组件中使用很 mapGetters 或 mapActions 等来引入 getters 和 actions 等,但随着项目状态数据增长,你会发觉越来越难以维护,因为这些数据和方法都太过分散。

看到这里,如果你还是不懂 vuex 是何物,或者你已经使用了 vuex 但是很不习惯它的用法,没有关系,你可以继续阅读本篇。实际上,在引入了 kiss-vuex 后,你甚至并不需要深刻理解 vuex 就能够很好地使用它。

如果有糖和白水,你会作何选择?我会选择把糖放入白水,味道更为完美。

介绍

kiss-vuex 是一个非常简单的语法糖类库,遵循软件工程里的 KISS 原则,仅仅暴露一个方法:Store。压缩版本仅仅只有 3KB,所以你可以放心加入到你的代码中。此处贴出几个有用的链接:



安装和使用

通过 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) {
 mit('increment')
export { appStore }

怎么样,是否有很明显的差别?

kiss-vuex 提供了一种极为简洁的声明方式,通过 Store 装饰器,你能够快速获得一个 Store 类,然后实例化导出。在你需要使用到的地方将这个 store puted 属性下。

贴一段使用示例代码:

// ponent.js
import Vue from 'vue';
import { appStore } from './AppStore';
export ponent('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.pilerOptions.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 相关代码量,并提倡“先引入后使用”这种模式,能够很方便地进行维护和定位问题。有兴趣的同学可以自行去 中查看源码,思路也是非常巧妙的。

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