浅谈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：

// 提交一个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); },}...