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 相关文章推荐
Dom 是什么的详细说明
Oct 25 Javascript
javascript模拟实现C# String.format函数功能代码
Nov 25 Javascript
JavaScript简单修改窗口大小的方法
Aug 03 Javascript
利用JQuery写一个简单的异步分页插件
Mar 07 Javascript
jQuery选择器基础入门教程
May 10 Javascript
jQuery插件zTree实现的基本树与节点获取操作示例
Mar 08 Javascript
node.js 抓取代理ip实例代码
Apr 30 Javascript
angularjs $http实现form表单提交示例
Jun 09 Javascript
angular2系列之路由转场动画的示例代码
Nov 09 Javascript
Vue中使用方法、计算属性或观察者的方法实例详解
Oct 31 Javascript
swiper4实现移动端导航栏tab滑动切换
Oct 16 Javascript
解决element-ui的下拉框有值却无法选中的情况
Nov 07 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程序的方法
2009/03/09 PHP
PHP上传图片进行等比缩放可增加水印功能
2014/01/13 PHP
PHP伪造来源HTTP_REFERER的方法实例详解
2015/07/06 PHP
php ucwords() 函数将字符串中每个单词的首字符转换为大写(实现代码)
2016/05/12 PHP
PHP数组实例详解
2016/06/26 PHP
PHP构造二叉树算法示例
2017/06/21 PHP
jQuery live( type, fn ) 委派事件实现
2009/10/11 Javascript
理解javascript中Map代替循环
2016/02/26 Javascript
js日期插件dateHelp获取本月、三个月、今年的日期
2016/03/07 Javascript
基于JS代码实现导航条弹出式悬浮菜单
2016/06/17 Javascript
BootStrap轮播HTML代码(推荐)
2016/12/10 Javascript
JavaScript 保护变量不被随意修改的实现代码
2017/09/27 Javascript
解决Jstree 选中父节点时被禁用的子节点也会选中的问题
2017/12/27 Javascript
layer.close()关闭进度条和Iframe窗的方法
2018/08/17 Javascript
vue3.0 CLI - 2.1 -  component 组件入门教程
2018/09/14 Javascript
[04:45]DOTA2上海特级锦标赛主赛事第四日RECAP
2016/03/06 DOTA
python通过线程实现定时器timer的方法
2015/03/16 Python
Python获取运行目录与当前脚本目录的方法
2015/06/01 Python
python相似模块用例
2016/03/04 Python
Python编写一个闹钟功能
2017/07/11 Python
简单谈谈Python的pycurl模块
2018/04/07 Python
详解python里的命名规范
2018/07/16 Python
Python 调用 zabbix api的方法示例
2019/01/06 Python
python实现集中式的病毒扫描功能详解
2019/07/09 Python
ansible动态Inventory主机清单配置遇到的坑
2020/01/19 Python
Django后端分离 使用element-ui文件上传方式
2020/07/12 Python
一些关于python 装饰器的个人理解
2020/08/31 Python
HTML 5 input placeholder 属性如何完美兼任ie
2014/05/12 HTML / CSS
Qoo10台湾站:亚洲领先的在线市场
2018/05/15 全球购物
Troy-Bilt官网:草坪割草机、吹雪机、分蘖机等
2019/02/19 全球购物
12.4法制宣传日活动总结
2014/08/26 职场文书
幼儿教师小班个人总结
2015/02/05 职场文书
学习保证书100字
2015/02/26 职场文书
写给老师的保证书
2015/05/09 职场文书
敬老院活动感想
2015/08/07 职场文书
在Oracle表中进行关键词搜索的过程
2022/06/10 Oracle