详解vuex持久化插件解决浏览器刷新数据消失问题


Posted in Javascript onApril 15, 2019

众所周知,vuex的一个全局状态管理的插件,但是在浏览器刷新的时候,内存中的state会释放,通常的解决办法就是用本地存储的方式保存数据,然后再vuex初始化的时候再赋值给state,手动存再手动取会觉得很麻烦,这个时候就可以使用vuex的插件vuex-solidification

插件地址: vuex-solidification , 欢迎star

插件原理

vuex有一个hook方法:store.subscribe((mutation, state) => {}) 每次在mutation方法执行完之后都会调用这个回调函数,返回执行完毕之后的state

使用方法

安装

npm install --save vuex-solidification

引入及配置

import Vue from 'vue'
import Vuex from 'vuex'
import count from './count/index.js';
import createPersistedState from 'vuex-solidification';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    count: {
      value: 0,
      num: 1
    },
    pos: 1
  }
  plugins: [ // 默认存储所有state数据到localstorage
    createPersistedState()
  ]
});

插件参数说明

createPersistedState({options}) : Function

options里面可以有:

key: String 存储到localStorage, sessionStorage 中对象的key,默认为vuex

local: Object 和 session: Object, 分别代表localStorage的配置和sessionStorage的配置

local 和 session 里面可以有: include: Array 和 exclude: Array

配置例子

createPersistedState({
  local: {
    include: ['count.value'] 
  }
})
/* 
  hook钩子触发之后,localstorage里面存储的对象为:
  {
    count: {
      value: 0,
    }
  }
*/


createPersistedState({
  local: {
    exclude: ['count.value'] 
  }
})
/* 
  hook钩子触发之后,localstorage里面存储的对象为:
  {
    count: {
      num: 1
    },
    pos: 1
  }
*/


createPersistedState({
  session: {
    include: ['count.value'] 
  }
})
/* 
  hook钩子触发之后,sessionstorage里面存储的对象为:
  {
    count: {
      value: 0,
    }
  }
*/


createPersistedState({
  session: {
    exclude: ['count.value'] 
  }
})
/* 
  hook钩子触发之后,sessionstorage里面存储的对象为:
  {
    count: {
      num: 1
    },
    pos: 1
  }
*/

createPersistedState({
  session: {
    include: ['count'] 
  },
  local: {
    include: ['pos']
  }
})
/* 
  hook钩子触发之后,
  sessionstorage里面存储的对象为:
  {
    count: {
      value: 0,
      num: 1
    },
  }
  sessionstorage里面存储的对象为:
  {
    pos: 0
  }
*/

代码例子

Check out the example on CodeSandbox.

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Safari5中alert的无限循环BUG
Apr 07 Javascript
使用Jquery Aajx访问WCF服务(GET、POST、PUT、DELETE)
Mar 16 Javascript
js数值和和字符串进行转换时可以对不同进制进行操作
Mar 05 Javascript
JS获取本周周一,周末及获取任意时间的周一周末功能示例
Feb 09 Javascript
图文详解Javascript中的上下文和作用域
Feb 15 Javascript
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
Mar 08 Javascript
jQuery实现的简单动态添加、删除表格功能示例
Sep 21 jQuery
iframe高度自适应及隐藏滚动条的实例详解
Sep 29 Javascript
详解vue中使用express+fetch获取本地json文件
Oct 10 Javascript
layui 解决form表单点击无反应的问题
Oct 25 Javascript
Vue项目打包编译优化方案
Sep 16 Javascript
JS实现简单九宫格抽奖
Jun 28 Javascript
vue-cli项目使用mock数据的方法(借助express)
Apr 15 #Javascript
说说Vuex的getters属性的具体用法
Apr 15 #Javascript
vue 中Virtual Dom被创建的方法
Apr 15 #Javascript
详解jQuery中的getAll()和cleanData()
Apr 15 #jQuery
详解javascript对数组和json数组的操作
Apr 15 #Javascript
详解vue中router-link标签所必备了解的属性
Apr 15 #Javascript
详解小程序设置缓存并且不覆盖原有数据
Apr 15 #Javascript
You might like
destoon利用Rewrite规则设置网站安全
2014/06/21 PHP
php实现parent调用父类的构造方法与被覆写的方法
2015/02/11 PHP
php+ajax实现无刷新动态加载数据技术
2015/04/28 PHP
php自动提交表单的方法(基于fsockopen与curl)
2016/05/09 PHP
[原创]php使用curl判断网页404(不存在)的方法
2016/06/23 PHP
PHP判断JSON对象是否存在的方法(推荐)
2016/07/06 PHP
JSQL  一个 web DB 的封装
2010/05/05 Javascript
JavaScript var声明变量背后的原理示例解析
2013/10/12 Javascript
js实现div弹出层的方法
2014/11/20 Javascript
jQuery浏览器CSS3特写兼容实例
2015/01/19 Javascript
JavaScript通过setTimeout实时显示当前时间的方法
2015/04/16 Javascript
javascript无刷新评论实现方法
2015/05/13 Javascript
js简单实现标签云效果实例
2015/08/06 Javascript
基于HTML+CSS+JS实现增加删除修改tab导航特效代码
2016/08/05 Javascript
利用浮层使select不可选的实现方法
2016/12/03 Javascript
基于canvas的二维码邀请函生成插件
2017/02/14 Javascript
vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动)
2017/10/16 Javascript
解决koa2 ctx.render is not a function报错问题
2018/08/07 Javascript
实现Vue的markdown文档可以在线运行的方法示例
2018/12/11 Javascript
Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的操作方法
2020/09/04 Javascript
基于react项目打包css引用路径错误解决方案
2020/10/28 Javascript
浅谈tensorflow1.0 池化层(pooling)和全连接层(dense)
2018/04/27 Python
使用tqdm显示Python代码执行进度功能
2019/12/08 Python
Python实现手机号自动判断男女性别(实例解析)
2019/12/22 Python
Python如何输出百分比
2020/07/31 Python
详解Python中的路径问题
2020/09/02 Python
python生成word合同的实例方法
2021/01/12 Python
python制作微博图片爬取工具
2021/01/16 Python
HTML5视频支持检测(检查浏览器是否支持视频播放)
2013/06/08 HTML / CSS
NFL墨西哥官方商店:Tienda NFL
2017/11/28 全球购物
数组越界问题
2015/10/21 面试题
2014年秋季开学典礼主持词
2014/08/02 职场文书
政风行风评议整改方案
2014/09/15 职场文书
CSS实现章节添加自增序号的方法
2021/06/23 HTML / CSS
PHP RabbitMQ消息列队
2022/05/11 PHP
苹果macOS 13开发者预览版Beta 8发布 正式版10月发布
2022/09/23 数码科技