傻瓜式vuex语法糖kiss-vuex整理

2023-09-02 14:54:04 57

前言

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

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

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

介绍

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

NPM
文档·中文
Github

安装和使用

通过npm：

$npmikiss-vuex

注意：需要先行安装vue和vuex。

在你的代码中，可以加入这样一个js文件：

//appStore.js
import{Store}from'kiss-vuex';

@Store
classAppStore{
counter=0;
}

constappStore=newAppStore();

export{AppStore,appStore}

OK，一个store就声明好了。What!?这么简单吗？对，就是这么简单。

我们对比下原始的store的声明方式：

importVuexfrom'vuex';

constappStore=newVuex.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
importVuefrom'vue';
import{appStore}from'./AppStore';

exportdefaultVue.component('app-hello',{
template:
`
Clicktimes:{{counter}}
addcounter
`,
computed:{
counter(){
returnappStore.counter;
}
},
methods:{
doClick(){
appStore.counter++;
}
}
})

如果你有使用Angular2+的经验，不难看出kiss-vuex里的@Store与Angular中的@Service十分类似。事实上，kiss-vuex正是借鉴了这种模式，在未来的vue3.0+版本中，也会有类似的语法特性。

当然，你依然可以使用函数调用的方式来声明store：

//appStore.js
import{Store}from'kiss-vuex';

//@Store
//classAppStore{
//counter=0;
//}

constappStore=Store({
counter:0
});

export{appStore}

引入的话就和上述示例中一样了。

另外，还有几个线上实例可供参考：

作为普通函数使用
作为装饰器使用

额外配置

上述@Store这种使用方式是基于es中的装饰器语法以及类属性语法，而目前装饰器和类属性都处于草案状态，所以需要让你的开发环境支持这些语法特性，你需要做一些额外配置。

babel

如果你使用了babel，需要安装@babel/plugin-proposal-decorators@babel/plugin-proposal-class-properties两个插件：

$npmi-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环境，可以直接这么使用：






varappStore=KissVuex.Store({
counter:0
});
//添加你的其余自定义代码

后记

使用kiss-vuex能够大大减少store相关代码量，并提倡“先引入后使用”这种模式，能够很方便地进行维护和定位问题。有兴趣的同学可以自行去github中查看源码，思路也是非常巧妙的。

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

傻瓜式vuex语法糖kiss-vuex整理

热门推荐

随机推荐