详解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调用Session的实现代码
Oct 29 Javascript
js实现单一html页面两套css切换代码
Apr 11 Javascript
Javascript拓展String方法小结
Jul 08 Javascript
Eclipse去除js(JavaScript)验证错误
Feb 11 Javascript
解决jquery实现的radio重新选中的问题
Jul 03 Javascript
详解jQuery中ajax.load()方法
Jan 25 Javascript
angular.fromJson与toJson方法用法示例
May 17 Javascript
JavaScript实现简单图片轮播效果
Aug 21 Javascript
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
Oct 23 Javascript
vue全局自定义指令-元素拖拽的实现代码
Apr 14 Javascript
JS实现前端路由功能示例【原生路由】
May 29 Javascript
js闭包的9个使用场景
Dec 29 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
解析用PHP实现var_export的详细介绍
2013/06/20 PHP
浅析PHP程序设计中的MVC编程思想
2014/07/28 PHP
检测codeigniter脚本消耗内存情况的方法
2015/03/21 PHP
PHP 将数组打乱 shuffle函数的用法及简单实例
2016/06/17 PHP
Mac下php 5升级到php 7的步骤详解
2017/04/26 PHP
PHP封装的分页类与简单用法示例
2019/02/25 PHP
PHP中上传文件打印错误错误类型分析
2019/04/14 PHP
PHP上传图片到数据库并显示的实例代码
2019/12/20 PHP
JavaScript定时器和优化的取消定时器方法
2015/07/03 Javascript
JavaScript实现LI列表数据绑定的方法
2015/08/04 Javascript
javascript自动恢复文本框点击清除后的默认文本
2016/01/12 Javascript
js给table赋值的实例代码
2016/10/13 Javascript
JavaScript实现点击按钮复制指定区域文本(推荐)
2016/11/25 Javascript
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
2017/03/08 Javascript
nodejs+websocket实时聊天系统改进版
2017/05/18 NodeJs
jQuery实现一个简单的验证码功能
2017/06/26 jQuery
全面介绍vue 全家桶和项目实例
2017/12/27 Javascript
微信小程序实现判断是分享到群还是个人功能示例
2019/05/03 Javascript
使用 node.js 模仿 Apache 小部分功能
2019/07/07 Javascript
python实现文件分组复制到不同目录的例子
2014/06/04 Python
Python实现过滤单个Android程序日志脚本分享
2015/01/16 Python
python定时检查某个进程是否已经关闭的方法
2015/05/20 Python
Python win32com 操作Exce的l简单方法(必看)
2017/05/25 Python
python爬虫超时的处理的实例
2018/12/19 Python
python自定义时钟类、定时任务类
2021/02/22 Python
日本即尚网:JSHOPPERS.com(支持中文)
2019/12/03 全球购物
蒂娜商店:Tiina the Store
2019/12/07 全球购物
Clos19英国:高档香槟、葡萄酒和烈酒在线购物平台
2020/07/10 全球购物
.NET初级开发工程师面试题
2014/04/18 面试题
信息管理员岗位职责
2013/12/01 职场文书
电工技术比武方案
2014/05/11 职场文书
计算机网络专业自荐书
2014/06/09 职场文书
文明旅游倡议书
2015/04/28 职场文书
安全生产培训心得体会
2016/01/18 职场文书
记一次Mysql不走日期字段索引的原因小结
2021/10/24 MySQL
浅谈mysql哪些情况会导致索引失效
2021/11/20 MySQL