浅谈super-vuex使用体验

时间:2021-05-18

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:

    const moduleA = { state: { ... }, mutations: { ... }, actions: { ... }, getters: { ... }}const moduleB = { state: { ... }, mutations: { ... }, actions: { ... }}const store = new Vuex.Store({ modules: { a: moduleA, b: moduleB }})store.state.a // -> moduleA 的状态store.state.b // -> moduleB 的状态

    super-vue

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

    import { ChildVuex } from "super-vuex";const child = new ChildVuex('...');child.value = { ... };child.setCommit = {...};const Main = new SuperVuex();Main.setModule(child);export default Main.init();

    路径式获取子模块数据

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

    'load.allow'

    可以取到load模块的allow属性

    二、操作方法

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

    Vuex:

    // 提交一个commitstore.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:

    const store = new Vuex.Store({ state: { todos: [ { id: 1, text: '...', done: true }, { id: 2, text: '...', done: false } ] }, getters: { doneTodos: state => { return state.todos.filter(todo => todo.done) } }})// in componentcomputed: { // 使用对象展开运算符将 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 => { return state.load.total + 100;});/* 调用$store.user.get('load.total') * 返回 200 */

    @cevio github

    @doc

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

    声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

    相关文章