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 相关文章推荐
用JavaScript 处理 URL 的两个函数代码
Aug 13 Javascript
在javascript中对于DOM的加强
Apr 11 Javascript
JQUERY 设置SELECT选中项代码
Feb 07 Javascript
jQuery中:input选择器用法实例
Jan 03 Javascript
jQuery实现表格颜色交替显示的方法
Mar 09 Javascript
简单谈谈javascript Date类型
Sep 06 Javascript
JS动态日期时间的获取方法
Sep 28 Javascript
深入学习JavaScript对象
Oct 13 Javascript
JS实现在文本指定位置插入内容的简单示例
Dec 22 Javascript
Express进阶之log4js实用入门指南
Feb 10 Javascript
Vue实现返回顶部按钮实例代码
Oct 21 Javascript
原生jQuery实现只显示年份下拉框
Dec 24 jQuery
使用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错误Cannot use object of type stdClass as array in错误的解决办法
2014/06/12 PHP
ThinkPHP 3使用OSS的方法
2018/07/19 PHP
Javascript开发之三数组对象实例介绍
2012/11/12 Javascript
jquery数据验证插件(自制,简单,练手)实例代码
2013/10/24 Javascript
JavaScript中使用指数方法Math.exp()的简介
2015/06/15 Javascript
简述Jquery与DOM对象
2015/07/10 Javascript
js面向对象编程总结
2017/02/16 Javascript
简单实现jQuery弹窗效果
2017/10/30 jQuery
webpack手动配置React开发环境的步骤
2018/07/02 Javascript
监听element-ui table滚动事件的方法
2019/03/26 Javascript
微信小程序如何再次获取用户授权的方法
2019/05/10 Javascript
js实现头像上传并且可预览提交
2020/12/25 Javascript
Python打印scrapy蜘蛛抓取树结构的方法
2015/04/08 Python
python通过post提交数据的方法
2015/05/06 Python
python 数据清洗之数据合并、转换、过滤、排序
2017/02/12 Python
使用Python对MySQL数据操作
2017/04/06 Python
python导入csv文件出现SyntaxError问题分析
2017/12/15 Python
Python使用progressbar模块实现的显示进度条功能
2018/05/31 Python
详解解决Python memory error的问题(四种解决方案)
2019/08/08 Python
关于pandas的离散化,面元划分详解
2019/11/22 Python
关于python pycharm中输出的内容不全的解决办法
2020/01/10 Python
python3 中时间戳、时间、日期的转换和加减操作
2020/07/14 Python
python利用xlsxwriter模块 操作 Excel
2020/10/14 Python
Python类的继承super相关原理解析
2020/10/22 Python
html5 canvas移动浏览器上实现图片压缩上传
2016/03/11 HTML / CSS
Hawes & Curtis澳大利亚官网:英国经典服饰品牌
2018/10/29 全球购物
Fossil加拿大官网:化石手表、手袋、首饰及配饰
2019/04/23 全球购物
数据库专业英语
2012/11/30 面试题
《大海那边》教学反思
2014/04/09 职场文书
儿园租房协议书范本
2014/12/02 职场文书
2014年人事行政工作总结
2014/12/03 职场文书
2015年度个人教学工作总结
2015/05/20 职场文书
2016年共产党员个人承诺书
2016/03/24 职场文书
2019辞职报告范本3篇!
2019/07/23 职场文书
golang通过递归遍历生成树状结构的操作
2021/04/28 Golang
Java 轮询锁使用时遇到问题
2022/05/11 Java/Android