浅谈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 相关文章推荐
随机显示经典句子或诗歌的javascript脚本
Aug 04 Javascript
基于jquery的一个浮动框(扩展性比较好 )
Aug 27 Javascript
chrome下img加载对height()的影响示例探讨
May 26 Javascript
JsRender for object语法简介
Oct 31 Javascript
浅谈JavaScript实现面向对象中的类
Dec 09 Javascript
jQuery实现鼠标滚动图片延迟加载效果附源码下载
Jun 28 Javascript
JavaScript学习笔记--常用的互动方法
Dec 07 Javascript
vue.js template模板的使用(仿饿了么布局)
Aug 13 Javascript
优化Vue项目编译文件大小的方法步骤
May 27 Javascript
详解小程序中h5页面onShow实现及跨页面通信方案
May 30 Javascript
JS回调函数 callback的理解与使用案例分析
Sep 09 Javascript
Vue + Scss 动态切换主题颜色实现换肤的示例代码
Apr 27 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
WordPress自定义时间显示格式
2015/03/27 PHP
非常有用的9个PHP代码片段
2016/04/06 PHP
PHP函数积累总结
2019/03/19 PHP
优化JavaScript脚本的性能的几个注意事项
2006/12/22 Javascript
JavaScript constructor和instanceof,JSOO中的一对欢喜冤家
2009/05/25 Javascript
jquery聚焦文本框与扩展文本框聚焦方法
2012/10/12 Javascript
JS中 用户登录系统的解决办法
2013/04/15 Javascript
React组件生命周期详解
2017/07/03 Javascript
NodeJS使用七牛云存储上传文件的方法
2017/07/24 NodeJs
图文介绍Vue父组件向子组件传值
2018/02/17 Javascript
vue中$refs的用法及作用详解
2018/04/24 Javascript
微信小程序实现左滑修改、删除功能
2020/10/19 Javascript
使用layui 的layedit定义自己的toolbar方法
2019/09/18 Javascript
解决vue-cli项目开发运行时内存暴涨卡死电脑问题
2019/10/29 Javascript
Vue 使用iframe引用html页面实现vue和html页面方法的调用操作
2020/11/16 Javascript
[02:41]DOTA2英雄基础教程 冥魂大帝
2014/01/16 DOTA
深入浅析ImageMagick命令执行漏洞
2016/10/11 Python
Python模拟用户登录验证
2017/09/11 Python
python实现扫描日志关键字的示例
2018/04/28 Python
Python检测网络延迟的代码
2018/05/15 Python
Python面向对象基础入门之编码细节与注意事项
2018/12/11 Python
对Python3 * 和 ** 运算符详解
2019/02/16 Python
pycharm显示远程图片的实现
2019/11/04 Python
python实现双色球随机选号
2020/01/01 Python
Python vtk读取并显示dicom文件示例
2020/01/13 Python
TensorFlow 显存使用机制详解
2020/02/03 Python
Python3爬虫关于代理池的维护详解
2020/07/30 Python
CSS3五个技巧给你的网站带来出色的效果
2009/04/02 HTML / CSS
意大利奢侈品购物网站:Giglio
2018/01/05 全球购物
历史系自荐信范文
2013/12/24 职场文书
写给女生的道歉信
2014/01/14 职场文书
化工厂员工工作总结
2015/10/15 职场文书
《祁黄羊》教学反思
2016/02/20 职场文书
Python一些基本的图像操作和处理总结
2021/06/23 Python
SpringCloud Function SpEL注入漏洞分析及环境搭建
2022/04/08 Java/Android
Python探索生命起源 matplotlib细胞自动机动画演示
2022/04/21 Python