浅谈super-vuex使用体验
vuex与super-vuex
super-vuex是一套用于简化Vuex的数据架构。
适用场景
在繁重的中后台项目中,引入vuex的作用如下:
- 全局数据共享,组件数据逻辑解耦
- 数据业务接口分离
- 数据模块化管理,利于多人协作
super-vuex在这三种需求下都是和原生vuex的功能相同,在vuex原有功能上将mutation和action的定义和传导机制改良为函数的写法,在简易数组改动逻辑的使用上提供push、pop、shift、unshift、splice的方法,可以在与、组件中自动地完成mutation,以及数据引用的路径化,你可以通过load.allow去取到load模块下的allow属性。
使用体验
下面通过简单的demo比较下原生vuex和super-vuex使用细节上的不同。
一、状态模块化
由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store对象就有可能变得相当臃肿。
Vuex:
constmoduleA={ state:{...}, mutations:{...}, actions:{...}, getters:{...} } constmoduleB={ state:{...}, mutations:{...}, actions:{...} } conststore=newVuex.Store({ modules:{ a:moduleA, b:moduleB } }) store.state.a//->moduleA的状态 store.state.b//->moduleB的状态
super-vue
自动将mutation逻辑执行,因此异步逻辑写在commit中即可,相比之下节省了代码量
import{ChildVuex}from"super-vuex"; constchild=newChildVuex('...'); child.value={...}; child.setCommit={...}; constMain=newSuperVuex(); Main.setModule(child); exportdefaultMain.init();
路径式获取子模块数据
数据路径,在之后的所有方法中,数据路径至关重要,它是一个数据的直观路径字符串,也就是上面[ChildVuex].value数据定义的数据路径。
'load.allow'
可以取到load模块的allow属性
二、操作方法
super-vuex的操作方法上告别了以往同步数组操作的繁杂过程,比如在以往的vuex模式中实现一个对数组的操作是效率偏低的,先在mutation中定义方法操作,后在action中commit或是在组件中commit,super-vuex很好的解决了这个问题,提供了一系列基础的数组操作方法让你操作数组非常简单。
Vuex:
//提交一个commit store.commit({ type:'increment', amount:10 }) mutations:{ //push increment(state,n){ state.arr==[...state.arr,n] } //pop popArr(state){ state.arr=arr.pop() } //shift shiftArr(state){ state.arr.shift() } //unshift unshift(state){ state.arr.unshift('students',{ name:'huaping1', age:302 }) } //deleteStudent deleteStudent(state){ state.arr.splice('students',0,1); }, } ...
super-vuex:
super-vuex在commit这层提供了一系列的操作api,提高了数据传递的效率
child.setCommit('increment',(state,n)=>{ state.count+=n; }); changeName(){ this.$store.user.commit('name','someone'); }, changeAllow(){ this.$store.user.commit('load.allow',false); }, pushStudent(){ this.$store.user.push('students',{ name:'huaping', age:300 }); }, pushSubs(){ this.$store.sub.push('subs',10); }, popSubs(){ this.$store.sub.pop('subs'); }, unshiftStudent(){ this.$store.user.unshift('students',{ name:'huaping1', age:302 }); }, shiftStudent(){ this.$store.user.shift('students') }, deleteStudent(){ this.$store.user.splice('students',0,1); }, gets(){ his.$store.user.dispatch('load.data'); }
方法列表function
- get(name):获取一个getter属性;例:store.sub.get('subs')
- commit(name,data):提交处理一个属性;例:store.user.commit('age',data)
- push(name,...data):提交一个数据的push行为
- pop(name):提交一个数据的pop行为
- unshift(name,...data):提交一个数据的unshift行为
- shift(name):提交一个数据的shift行为
- splice(name,arguments):用法同Array.prototype.splice
- dispatch(name,data):个async/await型的调用函数。与Vuex中的dispatch一致,用于出发setAction定义的行为
不仅如此,super-vuex还提供自定义模式可以覆盖掉默认给你提供的api,
child.setPushCommit(path,callback<(state,data)>); child.setUnShiftCommit(path,callback<(state,data)>); child.setPopCommit(path,callback<(state)>); child.setShiftCommit(path,callback<(state)>); //注意splice使用方法,在`data`中是一个数组 child.setSpliceCommit(path,callback<(state,data)>);
- [ChildVuex].setPushCommit数组的push操作行为
- [ChildVuex].setUnShiftCommit数组的unshift操作行为
- [ChildVuex].setSpliceCommit数组的splice操作行为
- [ChildVuex].setPopCommit数组的pop操作行为
- [ChildVuex].setShiftCommit数组的Shift操作行为
三、Getter
在组件内使用store中的数据,vuex通常是把getter放入computed中,使组件产生数据响应。
Vuex:
conststore=newVuex.Store({ state:{ todos:[ {id:1,text:'...',done:true}, {id:2,text:'...',done:false} ] }, getters:{ doneTodos:state=>{ returnstate.todos.filter(todo=>todo.done) } } }) //incomponent computed:{ //使用对象展开运算符将getter混入computed对象中 ...mapGetters([ 'doneTodosCount', 'anotherGetter', //... ]) }
super-vuex:
this.store.doneTodos.get('todos')
非常简约地完成getter,响应式getter
当然想使用原生的getter也是OK的,辅助方法adjFunction(对ChildVuex自动生成的属性进行覆盖或自定义)
[ChildVuex].setGetter(path,cb)
自定义或覆盖模块中相应getter的属性,相当于原生vuex的getter属性。
覆盖原有的getter
child.setGetter('load.total',state=>{ returnstate.load.total+100; }); /*调用$store.user.get('load.total') *返回200 */
@ceviogithub
@doc
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。