浅谈super-vuex使用体验

更新时间：2018年06月25日 13:47:25 作者：不一样的doger

super-vuex是一套用于简化Vuex的数据架构。这篇文章主要介绍了浅谈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:

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：

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

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 component
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 => {
  return state.load.total + 100;
});
/* 调用$store.user.get('load.total') 
 * 返回 200
 */

@cevio github

@doc

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

Vue3表单组件el-form校验规则rules属性示例详解
在el-form中正确使用rules校验是非常重要的,rules使用不当容易出现规则不生效、规则一直被触发等各种现象,这篇文章主要给大家介绍了关于Vue3表单组件el-form校验规则rules属性的相关资料,需要的朋友可以参考下
2024-08-08
vue3中使用keepAlive缓存路由组件不生效的问题解决
这篇文章主要介绍了vue3中使用keepAlive缓存路由组件不生效的问题解决,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
2024-06-06
Vue实现点击按钮进行上下页切换
这篇文章主要介绍了Vue实现点击按钮进行上下页的切换，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-01-01
vite+vue3+tsx项目打包后动态路由无法加载页面的问题及解决
这篇文章主要介绍了vite+vue3+tsx项目打包后动态路由无法加载页面的问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
vue虚拟滚动性能优化方式详解
这篇文章主要为大家介绍了vue虚拟滚动性能优化方式详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-08-08
Vue获取当前系统日期(年月日)的示例代码
发中会有要获取当前日期的需求,有的是获取到当前月份,有的是精确到分秒,在 Vue 开发中,获取当前时间是一项常见的需求,本文将深入探讨Vue获取当前系统日期(年月日),帮助您更好地利用当前时间,需要的朋友可以参考下
2024-01-01
vue 使用 sortable 实现 el-table 拖拽排序功能
这篇文章主要介绍了vue 使用 sortable 实现 el-table 拖拽排序功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-12-12
vue选项卡Tabs组件实现示例详解
这篇文章主要为大家介绍了vue选项卡Tabs组件实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-11-11
Vue中的父子组件通讯以及使用sync同步父子组件数据
这篇文章主要介绍了Vue中的父子组件通讯以及使用sync同步父子组件数据，对vue感兴趣的同学，可以参考下
2021-04-04
vue使用window.open()跳转页面的代码案例
这篇文章主要介绍了vue中对window.openner的使用,vue使用window.open()跳转页面的代码案例，本文通过实例代码给大家详细讲解，需要的朋友可以参考下
2022-11-11

浅谈super-vuex使用体验

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具