vuex-proxy
v1.0.0
Published
Vuex 增强版,简化 vuex,让 vuex 更简单
Downloads
18
Readme
Vuex Proxy
Vuex 增强版,简化 vuex,让 vuex 更简单
使用方法
- 安装
yarn add vuex-proxy
- 如果针对已存在的项目,则按照如下改动
- import ... from 'vuex'
+ import ... from 'vuex-proxy'
完成。当然了,有一些 Break Change,因为设计原因,有一些和 vuex 不一样的地方,如果你没有涉及到以下几点,则无缝迁移
- state, getters, actions, mutations 的字段名不能重复
- 没有 2
API
首先, vuex 那套可以继续用,工具函数和各种操作都兼容,说明一下和 vuex 不一样的地方
store
import Vue from 'vue'
import VuexProxy from 'vuex-proxy'
Vue.use(VuexProxuy)
const store = new VuexProxy.Store{
// 和 vuex 一样
state: {
num: 15,
wnum: [0, 0],
wpnum: [0, 0],
},
// 和 vuex 一样
getters: {
numPlus: (state) => state.num + 1,
},
// 新增 watch,在 state, getters 发生变化时,触发函数,使用方法和 vue 组件的 watch 一样
watch: {
num(newV, oldV) {
this.wnum = [newV, oldV];
},
numPlus(newV, oldV) {
this.wpnum = [newV, oldV];
},
},
// 和 vuex 有区别
actions: {
// 参数随便,this 指向了当前模块 VuexProxy 实例,actions的调用也不一样,后面涉及
reset() {
// 在 actions 中修改状态,放心,大胆的改吧
this.num = 0;
},
plus() {
this.num++;
},
setNum(n) {
this.num = n;
},
},
// 当模块初始化完成后触发
register() {
this.$root.testMod.triggerRegister = true;
},
// 当模块动态卸载是触发
unregister() {
this.$root.testMod.triggerUnregister = true;
},
// 可以看到,没有 mutations 了
}
store.num // 5
store.numPlus // 6
store.reset() // 直接调用
store.setNum(10) // 直接传参,参数个数无限制
store.$store // 原始的 vuex Store,没有任何入侵
store.$store.dispatch('plus') // 当然,如果你喜欢用dispatch 和 commit,也一样兼容,在 store 定义的时候参数记得和 vuex store 一样
store 的定义有些区别
- actions 和 mutations 没有区别了
- actions 和 mutations 的触发直接调用,没有 dispatch,没有 commit,如果非要用 dispatch 和 commit,使用 store.$store
Vue Component
在 Vue 组件中使用时
// 实例化Vue应用
const app = new Vue({ store });
const component = Vue.extend({
// 注意这个 $s,为注入组件标识
// 支持数组,对象,数组嵌入对象,对象嵌入数组
// 注入的时候,内部知道哪些该注入到 computed,哪些该注入到 methods,不需要你关心
$s: [
{
// num 是 state,所以最终会被注入到 computed,可以定义 get 和 set
num: {
get: 'num',
set: 'num',
},
num2: {
get() {
return this.$s.num;
},
set(v) {
this.$s.num = v;
},
},
// numPlus 是 getters,所以最终会被注入到 computed,可以定义 get 和 set
numPlus: {
get() {
return this.$s.numPlus;
},
},
numPlus2: {
get: 'numPlus', // 如果是 字符串,则规则和 vuex 的 mapState, mapAction, mapMutation 等等那种工具函数差不多
set(v) {
this.$s.num = v - 1;
},
},
},
'reset', //
'plus',
{
plus2: 'plus', // 别名,把 store.plus 绑定到 组件的 this.plus2() 中
reset2: 'reset',
},
{ z: 'testmod.z' }, // 字符串使用 . 或者 / 表示路径
{ testmod: ['x', { y: 'y', z: { a: { b: 'b' } } }] },
{ n: 'testmod.y/z/a.b' }, // 你也可以 . 和 / 混用,效果没有区别
],
mounted() {
this.num; // 5
this.num = 14;
this.numPlus; // 15
this.numPlus = 20;
this.reset();
this.setNum(30);
this.z; // { a: { b: 'b' } }
this.n; // b
this.$s.num; // this.$s 就是 store 实例
this.$store; // 原始 vuex Store 实例
this.$s.$store; // 等价与 this.$store
},
});
Vuex Proxy 对于 Vuex
- 兼容 Vuex,Vuex Proxy 通过了 Vuex 的大部分单元测试,但是因为 Vuex Proxy 的 state, getters, actions, mutations 的字段名不能重复,所以有些测试用例是无法通过的。所以 Vuex Proxy 基本兼容 vuex 的大部分操作
- 增加了 register, unregister 初始化与卸载的钩子
- 增加了 watch ,使用方法和 vue 组件的 watch 一致
- actions 的定义和调用优化,但是兼容 vuex
- actions 中直接修改状态,并且是响应式的,包括 组件的 watch,render,和 store 的 watch 都会响应
- vue 组件新增 $s, 用于直接访问和操作 Vuex Proxy Store
为什么要这样做
- 我觉得 mutations 是多余的
- vuex 可以变得更简单
- vuex 可以变得更强大
- dispatch 和 commit 不好用
- 开发效率更高了
使用它有什么代价
- 中大型的代码维护会变得很糟糕,没错,中大型项目建议不要用
- 性能没有 vuex 好,这是可预见的,vuex Proxy 底层都是调用的 vuex 的 api