浅谈super-vuex使用体验


Posted in Javascript onJune 25, 2018

vuex与super-vuex

super-vuex是一套用于简化Vuex的数据架构。

适用场景

在繁重的中后台项目中,引入vuex的作用如下:

  1. 全局数据共享,组件数据逻辑解耦
  2. 数据业务接口分离
  3. 数据模块化管理,利于多人协作

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

  1. get(name):获取一个getter属性;例:store.sub.get('subs')
  2. commit(name, data):提交处理一个属性;例:store.user.commit('age', data)
  3. push(name, ...data):提交一个数据的push行为
  4. pop(name):提交一个数据的pop行为
  5. unshift(name, ...data):提交一个数据的unshift行为
  6. shift(name): 提交一个数据的shift行为
  7. splice(name, arguments):用法同Array.prototype.splice
  8. 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)>);
  1. [ChildVuex].setPushCommit 数组的push操作行为
  2. [ChildVuex].setUnShiftCommit 数组的unshift操作行为
  3. [ChildVuex].setSpliceCommit 数组的splice操作行为
  4. [ChildVuex].setPopCommit 数组的pop操作行为
  5. [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

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

Javascript 相关文章推荐
jquery 1.4.2发布!主要是性能与API
Feb 25 Javascript
JS 毫秒转时间示例代码
Sep 22 Javascript
简单的代码实现jquery定时器
Jan 03 Javascript
js/jquery解析json和数组格式的方法详解
Jan 09 Javascript
javascript中 try catch用法
Aug 16 Javascript
js实现不重复导入的方法
Mar 02 Javascript
jquery.serialize() 函数语法及简单实例
Jul 08 Javascript
微信小程序request请求后台接口php的实例详解
Sep 20 Javascript
详解如何优雅地在React项目中使用Redux
Dec 28 Javascript
Angular4学习笔记router的简单使用
Mar 30 Javascript
浅谈vue.use()方法从源码到使用
May 12 Javascript
react实现antd线上主题动态切换功能
Aug 12 Javascript
使用vue-router beforEach实现判断用户登录跳转路由筛选功能
Jun 25 #Javascript
使用vue的transition完成滑动过渡的示例代码
Jun 25 #Javascript
JS实现仿微信支付弹窗功能
Jun 25 #Javascript
vue.js 实现输入框动态添加功能
Jun 25 #Javascript
vue-router重定向不刷新问题的解决
Jun 25 #Javascript
JavaScript实现封闭区域布尔运算的示例代码
Jun 25 #Javascript
详解React之父子组件传递和其它一些要点
Jun 25 #Javascript
You might like
世界收音机发展史
2021/03/01 无线电
ezSQL PHP数据库操作类库
2010/05/16 PHP
PHP中的strtr函数使用介绍(str_replace)
2011/10/20 PHP
php判断终端是手机还是电脑访问网站的思路及代码
2013/04/24 PHP
php采集自中央气象台范围覆盖全国的天气预报代码实例
2015/01/04 PHP
PHP封装的非对称加密RSA算法示例
2018/05/28 PHP
thinkphp5引入公共部分header、footer的方法详解
2018/09/14 PHP
动态加载外部javascript文件的函数代码分享
2011/07/28 Javascript
JS鼠标滑过图片时切换图片实现思路
2013/09/12 Javascript
JS获取地址栏参数的几种方法小结
2014/02/28 Javascript
javascript表单事件处理方法详解
2016/05/15 Javascript
用JS中split方法实现彩色文字背景效果实例
2016/08/24 Javascript
jQuery实现弹出带遮罩层的居中浮动窗口效果
2016/09/12 Javascript
jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示问题分析
2016/10/30 Javascript
BootstrapValidator超详细教程(推荐)
2016/12/07 Javascript
jquery+css实现简单的图片轮播效果
2017/08/07 jQuery
浅谈angular4.0中路由传递参数、获取参数最nice的写法
2018/03/12 Javascript
JS构造一个html文本内容成文件流形式发送到后台
2018/07/31 Javascript
mock.js实现模拟生成假数据功能示例
2019/01/15 Javascript
highCharts提示框中显示当前时间的方法
2019/01/18 Javascript
微信小程序实现Session功能及无法获取session问题的解决方法
2019/05/07 Javascript
jquery+php后台实现省市区联动功能示例
2019/05/23 jQuery
js实现文字头像的生成代码
2020/03/07 Javascript
VSCode搭建React Native环境
2020/05/07 Javascript
python中的多重继承实例讲解
2014/09/28 Python
Python内置模块ConfigParser实现配置读写功能的方法
2018/02/12 Python
python实现下载pop3邮件保存到本地
2018/06/19 Python
python将字母转化为数字实例方法
2019/10/04 Python
在Matplotlib图中插入LaTex公式实例
2020/04/17 Python
Python如何实现线程间通信
2020/07/30 Python
Python使用urlretrieve实现直接远程下载图片的示例代码
2020/08/17 Python
PyCharm中关于安装第三方包的三个建议
2020/09/17 Python
致接力运动员广播稿
2014/02/17 职场文书
劳动保障个人工作总结
2015/03/04 职场文书
无房证明样本
2015/06/17 职场文书
python如何利用traceback获取详细的异常信息
2021/06/05 Python