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: