vuex 中插件的编写案例解析


Posted in Javascript onJune 10, 2019

一、官方文档

1、第一步

const myPlugin = store => {
 // 当 store 初始化后调用
 store.subscribe((mutation, state) => {
 // 每次 mutation 之后调用
 // mutation 的格式为 { type, payload }
 });
};

2、第二步

const store = new Vuex.Store({
 // ...
 plugins: [myPlugin]
});

二、编写一个打印日志的插件

1、函数的书写

import _ from 'lodash';
function logger() {
 return function(store) {
 let prevState = store.state;
 store.subscribe((mutations, state) => {
  console.log('prevState', prevState);
  console.log(mutations);
  console.log('currentState', state);
  prevState = _.cloneDeep(state);
 });
 };
}

2、使用

export default new Vuex.Store({
 modules: {
 ...
 },
 strict: true,
 plugins: process.NODE_ENV === 'production' ? [] : [logger()]
});

三、 vuex 数据持久化

1、函数的书写

function vuexLocal() {
 return function(store) {
 const local = JSON.parse(localStorage.getItem('myvuex')) || store.state;
 store.replaceState(local);
 store.subscribe((mutations, state) => {
  const newLocal = _.cloneDeep(state);
  sessionStorage.setItem('myvuex', JSON.stringify(newLocal));
 });
 };
}

2、使用

export default new Vuex.Store({
 modules: {
 ...
 },
 strict: true,
 plugins: process.NODE_ENV === 'production' ? [vuexLocal()] : [logger(), vuexLocal()]
});

3、类似的第三方库

1. vuex-persistedstate

2. vuex-persist

总结

以上所述是小编给大家介绍的vuex 中插件的编写案例解析,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
Js动态创建div
Sep 25 Javascript
js身份证验证超强脚本
Oct 26 Javascript
在网页里看flash的trace数据的js类
Jan 10 Javascript
iframe自适应宽度、高度 ie6 7 8,firefox 3.86下测试通过
Jul 29 Javascript
JS判断元素为数字的奇异写法分享
Aug 01 Javascript
表单验证插件Validation应用的实例讲解
Oct 10 Javascript
基于jquery实现最简单的选项卡切换效果
May 08 Javascript
通过扫描二维码打开app的实现代码
Nov 10 Javascript
react-native-video实现视频全屏播放的方法
Mar 19 Javascript
动态内存分配导致影响Javascript性能的问题
Dec 18 Javascript
详解微信小程序开发之formId使用(模板消息)
Aug 27 Javascript
JS实现超级好看的鼠标小尾巴特效
Dec 01 Javascript
使用webpack搭建vue项目及注意事项
Jun 10 #Javascript
详解iview的checkbox多选框全选时校验问题
Jun 10 #Javascript
前端路由&webpack基础配置详解
Jun 10 #Javascript
在Vue中用canvas实现二维码和图片合成海报的方法
Jun 10 #Javascript
vue中使用 pako.js 解密 gzip加密字符串的方法
Jun 10 #Javascript
移动端 Vue+Vant 的Uploader 实现上传、压缩、旋转图片功能
Jun 10 #Javascript
利用百度echarts实现图表功能简单入门示例【附源码下载】
Jun 10 #Javascript
You might like
PHP学习笔记之二
2011/01/17 PHP
PHP跨时区(UTC时间)应用解决方案
2013/01/11 PHP
php小经验:解析preg_match与preg_match_all 函数
2013/06/29 PHP
Laravel框架中缓存的使用方法分析
2019/09/06 PHP
js单例模式的两种方案
2013/10/22 Javascript
jquery下div 的resize事件示例代码
2014/03/09 Javascript
js图片跟随鼠标移动代码
2015/11/26 Javascript
Linux下为Node.js程序配置MySQL或Oracle数据库的方法
2016/03/19 Javascript
详解JavaScript中的自定义事件编写
2016/05/10 Javascript
jQuery实现对无序列表的排序功能(附demo源码下载)
2016/06/25 Javascript
高效Web开发的10个jQuery代码片段
2016/07/22 Javascript
jQuery Ajax 加载数据时异步显示加载动画
2016/08/01 Javascript
详解JS几种变量交换方式以及性能分析对比
2016/11/25 Javascript
vue.js 实现点击按钮动态添加li的方法
2018/09/07 Javascript
bootstrap table实现合并单元格效果
2018/12/24 Javascript
如何使用VuePress搭建一个类型element ui文档
2019/02/14 Javascript
JS面向对象之单选框实现
2020/01/17 Javascript
vue 使用微信jssdk,调用微信相册上传图片功能
2020/11/13 Javascript
Python挑选文件夹里宽大于300图片的方法
2015/03/05 Python
在Python中使用zlib模块进行数据压缩的教程
2015/06/26 Python
Python类属性的延迟计算
2016/10/22 Python
Python利用BeautifulSoup解析Html的方法示例
2017/07/30 Python
Python英文文本分词(无空格)模块wordninja的使用实例
2019/02/20 Python
Appium+python自动化之连接模拟器并启动淘宝APP(超详解)
2019/06/17 Python
基于python连接oracle导并出数据文件
2020/04/28 Python
Python StringIO及BytesIO包使用方法解析
2020/06/15 Python
如何利用Python写个坦克大战
2020/11/18 Python
CSS的background属性及CSS3的背景图片设置总结
2016/06/13 HTML / CSS
一款html5 canvas实现的图片玻璃碎片特效
2014/09/11 HTML / CSS
香港卓悦化妆品官网:BONJOUR
2017/09/21 全球购物
毕业生文员求职信
2013/11/03 职场文书
教师业务培训方案
2014/05/01 职场文书
幼儿园植树节活动总结
2014/07/04 职场文书
超级礼物观后感
2015/06/15 职场文书
趣味运动会加油词
2015/07/18 职场文书
Python使用OpenCV实现虚拟缩放效果
2022/02/28 Python