浅谈super-vuex使用体验

前端之家收集整理的这篇文章主要介绍了浅谈super-vuex使用体验前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

vuex与super-vuex

super-vuex是一套用于简化Vuex的数据架构。

适用场景

在繁重的中后台项目中,引入vuex的作用如下:

  1. 全局数据共享,组件数据逻辑解耦
  2. 数据业务接口分离
  3. 数据模块化管理,利于多人协作

super-vuex在这三种需求下都是和原生vuex的功能相同,在vuex原有功能上将mutation和action的定义和传导机制改良为函数的写法,在简易数组改动逻辑的使用上提供push、pop、shift、unshift、splice的方法,可以在与、组件中自动地完成mutation,以及数据引用的路径化,你可以通过load.allow去取到load模块下的allow属性

使用体验

下面通过简单的demo比较下原生vuex和super-vuex使用细节上的不同。

一、状态模块化

由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。

Vuex:

const moduleB = {
state: { ... },actions: { ... }
}

const store = new Vuex.Store({
modules: {
a: moduleA,b: moduleB
}
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

super-vue

自动将mutation逻辑执行,因此异步逻辑写在commit中即可,相比之下节省了代码

const child = new ChildVuex('...');

child.value = { ... };

child.setCommit = {...};

const Main = new SuperVuex();

Main.setModule(child);

export default Main.init();

路径式获取子模块数据

数据路径,在之后的所有方法中,数据路径至关重要,它是一个数据的直观路径字符串,也就是上面[ChildVuex].value 数据定义的数据路径。

可以取到load模块的allow属性

二、操作方法

super-vuex的操作方法上告别了以往同步数组操作的繁杂过程,比如在以往的vuex模式中实现一个对数组的操作是效率偏低的,先在mutation中定义方法操作,后在action中commit或是在组件中commit,super-vuex很好的解决了这个问题,提供了一系列基础的数组操作方法让你操作数组非常简单。

Vuex:

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',1);
},}
...

super-vuex:

super-vuex在commit这层提供了一系列的操作api,提高了数据传递的效率

{ 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',1);
},gets() {
his.$store.user.dispatch('load.data');
}

方法列表function

  1. get(name):获取一个getter属性;例:store.sub.get('subs')
  2. commit(name,data):提交处理一个属性;例:store.user.commit('age',data)
  3. push(name,...data):提交一个数据的push行为
  4. pop(name):提交一个数据的pop行为
  5. unshift(name,...data):提交一个数据的unshift行为
  6. shift(name): 提交一个数据的shift行为
  7. splice(name,arguments):用法同Array.prototype.splice
  8. dispatch(name,data):个async/await型的调用函数。与Vuex中的dispatch一致,用于出发setAction定义的行为

不仅如此,super-vuex还提供自定义模式可以覆盖掉默认给你提供的api,

); child.setUnShiftCommit(path,data)>); child.setPopCommit(path,callback<(state)>); child.setShiftCommit(path,callback<(state)>);

// 注意splice使用方法,在data中是一个数组
child.setSpliceCommit(path,data)>);

  1. [ChildVuex].setPushCommit 数组的push操作行为
  2. [ChildVuex].setUnShiftCommit 数组的unshift操作行为
  3. [ChildVuex].setSpliceCommit 数组的splice操作行为
  4. [ChildVuex].setPopCommit 数组的pop操作行为
  5. [ChildVuex].setShiftCommit 数组的Shift操作行为

三、Getter

在组件内使用store中的数据,vuex通常是把getter放入computed中,使组件产生数据响应。

Vuex:

{ return state.todos.filter(todo => todo.done) } } })

// in component
computed: {
// 使用对象展开运算符将 getter 混入 computed 对象中
...mapGetters([
'doneTodosCount','anotherGetter',// ...
])
}

super-vuex:

非常简约地完成getter,响应式getter

当然想使用原生的getter也是OK的,辅助方法adjFunction(对ChildVuex自动生成属性进行覆盖或自定义)

自定义或覆盖模块中相应getter的属性,相当于原生vuex的getter属性

覆盖原有的getter

{ return state.load.total + 100; }); /* 调用$store.user.get('load.total') * 返回 200 */

@cevio github

@doc

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

原文链接:https://www.f2er.com/vue/31796.html

猜你在找的Vue相关文章