浅谈super

浅谈super

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: modulnOJfJBYrKSeA,

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() {

thttp://his.$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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。