详解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 相关文章推荐
jQuery滚动加载图片效果的实现
Mar 06 Javascript
转义字符(\)对JavaScript中JSON.parse的影响概述
Jul 17 Javascript
jQuery动画效果-fadeIn fadeOut淡入浅出示例代码
Aug 28 Javascript
AngularJS中关于ng-class指令的几种实现方式详解
Sep 17 Javascript
JavaScript实现选中文字提示新浪微博分享效果
Jun 15 Javascript
使用jQuery实现鼠标点击左右按钮滑动切换
Aug 04 jQuery
Webpack性能优化 DLL 用法详解
Aug 10 Javascript
JavaScript中如何判断一个值的类型
Sep 15 Javascript
React Native中Navigator的使用方法示例
Oct 13 Javascript
浅谈gulp创建完整的项目流程
Dec 20 Javascript
浅谈React的最大亮点之虚拟DOM
May 29 Javascript
微信小程序tabBar 返回tabBar不刷新页面
Jul 25 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
上海地方志办公室-上海电子仪表工业志
2021/03/04 无线电
php与mysql建立连接并执行SQL语句的代码
2011/07/04 PHP
php生成图形(Libchart)实例
2013/11/06 PHP
php实现mysql数据库连接操作及用户管理
2015/11/08 PHP
Laravel如何实现适合Api的异常处理响应格式
2020/06/14 PHP
“不能执行已释放的Script代码”错误的原因及解决办法
2007/09/09 Javascript
JS控制日期显示的小例子
2013/11/23 Javascript
ie 7/8不支持trim的属性的解决方案
2014/05/23 Javascript
js+html5实现canvas绘制镂空字体文本的方法
2015/06/05 Javascript
js实现瀑布流的三种方式比较
2020/06/28 Javascript
jQuery实现只允许输入数字和小数点的方法
2016/03/02 Javascript
JavaScript 弹出子窗体并返回结果到父窗体的实现代码
2016/05/28 Javascript
jquery实现下拉菜单的手风琴效果
2017/07/23 jQuery
新手vue构建单页面应用实例代码
2017/09/18 Javascript
jQuery实现简单日期格式化功能示例
2017/09/19 jQuery
vue组件的写法汇总
2018/04/12 Javascript
浅谈Webpack打包优化技巧
2018/06/12 Javascript
小程序获取当前位置加搜索附近热门小区及商区的方法
2019/04/08 Javascript
js实现双色球效果
2020/08/02 Javascript
JavaScript 判断数据类型的4种方法
2020/09/11 Javascript
[53:36]Liquid vs VP Supermajor决赛 BO 第三场 6.10
2018/07/05 DOTA
python实现从web抓取文档的方法
2014/09/26 Python
Python 制作糗事百科爬虫实例
2016/09/22 Python
Python处理Excel文件实例代码
2017/06/20 Python
python SMTP实现发送带附件电子邮件
2018/05/22 Python
Python使用Selenium爬取淘宝异步加载的数据方法
2018/12/17 Python
pandas数据集的端到端处理
2019/02/18 Python
详解Python利用random生成一个列表内的随机数
2019/08/21 Python
Python爬虫新手入门之初学lxml库
2020/12/20 Python
CSS3中background-clip和background-origin的区别示例介绍
2014/03/10 HTML / CSS
乐高积木玩具美国官网:LEGO Shop US
2016/09/16 全球购物
手工制作的豪华英式沙发和沙发床:Willow & Hall
2019/05/03 全球购物
医者仁心观后感
2015/06/17 职场文书
2016幼儿园毕业感言
2015/12/08 职场文书
Java spring单点登录系统
2021/09/04 Java/Android
《堡垒之夜》联动《刺客信条》 4月7日正式上线
2022/04/06 其他游戏