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对象和属性的创建方法
Jan 15 Javascript
jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
Oct 22 Javascript
javascript检查浏览器是否支持flash的实现代码
Aug 14 Javascript
jQuery定义背景动态切换效果的方法
Mar 23 Javascript
BootStrap中的表单大全
Sep 07 Javascript
微信小程序  Mustache语法详细介绍
Oct 27 Javascript
详解Angular2 关于*ngFor 嵌套循环
May 22 Javascript
vue路由嵌套的SPA实现步骤
Nov 06 Javascript
vue下拉列表功能实例代码
Apr 08 Javascript
Vue引用Swiper4插件无法重写分页器样式的解决方法
Sep 27 Javascript
Vue 实现复制功能,不需要任何结构内容直接复制方式
Nov 09 Javascript
JavaScript This指向问题详解
Nov 25 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
FleaPHP框架数据库查询条件($conditions)写法总结
2016/03/19 PHP
Laravel框架分页实现方法分析
2018/06/12 PHP
yii2 上传图片的示例代码
2018/11/02 PHP
TP5框架使用QueryList采集框架爬小说操作示例
2020/03/26 PHP
js模拟实现Array的sort方法
2007/12/11 Javascript
jQuery.getScript加载同域JS的代码
2012/02/13 Javascript
温习Javascript基础语法之词法结构
2016/05/31 Javascript
JavaScript实现简单的拖动效果
2016/07/02 Javascript
JS实现获取当前URL和来源URL的方法
2016/08/24 Javascript
jQuery基于cookie实现换肤功能实例
2017/10/14 jQuery
Vue组件通信的四种方式汇总
2018/02/08 Javascript
Vue渲染过程浅析
2019/03/14 Javascript
JavaScript如何获取一个元素的样式信息
2019/07/29 Javascript
推荐几个不错的console调试技巧实现
2019/12/20 Javascript
vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决
2020/09/28 Javascript
[01:31:22]Ti4 循环赛第四日附加赛LGD vs Mouz
2014/07/13 DOTA
使用Python判断IP地址合法性的方法实例
2014/03/13 Python
Python命令行参数解析模块getopt使用实例
2015/04/13 Python
Python中优化NumPy包使用性能的教程
2015/04/23 Python
Python 操作文件的基本方法总结
2017/08/10 Python
Python常见MongoDB数据库操作实例总结
2018/07/24 Python
python使用webdriver爬取微信公众号
2018/08/31 Python
python实现从pdf文件中提取文本,并自动翻译的方法
2018/11/28 Python
python+opencv 读取文件夹下的所有图像并批量保存ROI的方法
2019/01/10 Python
详解pandas删除缺失数据(pd.dropna()方法)
2019/06/25 Python
Python 多线程,threading模块,创建子线程的两种方式示例
2019/09/29 Python
Python多线程获取返回值代码实例
2020/02/17 Python
Python Dict找出value大于某值或key大于某值的所有项方式
2020/06/05 Python
国外平面设计第一市场:99designs
2016/10/25 全球购物
为奢侈时尚带来了慈善元素:Olivela
2018/09/29 全球购物
入团者的自我评价分享
2013/12/02 职场文书
财务支持类个人的自我评价
2014/02/14 职场文书
材料员岗位职责
2015/02/10 职场文书
2015年宣传工作总结
2015/04/08 职场文书
2015大学党建带团建工作总结
2015/07/23 职场文书
详解MySql中InnoDB存储引擎中的各种锁
2022/02/12 MySQL