详解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 相关文章推荐
Javascript里使用Dom操作Xml
Sep 20 Javascript
js 如何实现对数据库的增删改查
Nov 23 Javascript
JS取request值以及自动执行使用示例
Feb 24 Javascript
灵活的理解JavaScript中的this指向
Feb 25 Javascript
浅谈JS中逗号运算符的用法
Jun 12 Javascript
JS禁止查看网页源代码的实现方法
Oct 12 Javascript
JS中动态创建元素的三种方法总结(推荐)
Oct 20 Javascript
详解js树形控件—zTree使用总结
Dec 28 Javascript
使用node.js对音视频文件加密的实例代码
Aug 30 Javascript
AngularJs1.x自定义指令独立作用域的函数传入参数方法
Oct 09 Javascript
Vue 中可以定义组件模版的几种方式
Aug 06 Javascript
vue实现element表格里表头信息提示功能(推荐)
Nov 20 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&mysql(一)
2006/10/09 PHP
PHP永久登录、记住我功能实现方法和安全做法
2015/04/27 PHP
php计算整个目录大小的方法
2015/06/19 PHP
PHP微信支付开发实例
2016/06/22 PHP
PHP编写简单的App接口
2016/08/28 PHP
php版微信小店调用api示例代码
2016/11/12 PHP
PHP简单留言本功能实现代码
2017/06/09 PHP
jquery获得下拉框值的代码
2011/08/13 Javascript
javascript的propertyIsEnumerable()方法使用介绍
2014/04/09 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 简史
2015/01/09 Javascript
基于jQuery+PHP+Mysql实现在线拍照和在线浏览照片
2015/09/06 Javascript
javascript实现网站加入收藏功能
2015/12/16 Javascript
基于jQuery Ajax实现上传文件
2016/03/24 Javascript
JS操作xml对象转换为Json对象示例
2017/03/25 Javascript
微信小程序实现收藏与取消收藏切换图片功能
2018/08/03 Javascript
谈谈React中的Render Props模式
2018/12/06 Javascript
angularjs自定义过滤器demo示例
2019/08/24 Javascript
jQuery加PHP实现图片上传并提交的示例代码
2020/07/16 jQuery
前端如何实现动画过渡效果
2021/02/05 Javascript
python线程池的实现实例
2013/11/18 Python
python 的列表遍历删除实现代码
2020/04/12 Python
python 文件操作api(文件操作函数)
2016/08/28 Python
python去掉空白行的多种实现代码
2018/03/19 Python
在python中pandas的series合并方法
2018/11/12 Python
Python 的字典(Dict)是如何存储的
2019/07/05 Python
python画环形图的方法
2020/03/25 Python
Django实现列表页商品数据返回教程
2020/04/03 Python
Python pickle模块常用方法代码实例
2020/10/10 Python
python爬虫分布式获取数据的实例方法
2020/11/26 Python
Django前后端分离csrf token获取方式
2020/12/25 Python
python-jwt用户认证食用教学的实现方法
2021/01/19 Python
电气专业应届生求职信
2013/11/01 职场文书
护理专业学生职业生涯规划范文
2014/03/11 职场文书
学生自我评语大全
2014/04/18 职场文书
建筑工地资料员岗位职责
2015/04/13 职场文书
zabbix 代理服务器的部署与 zabbix-snmp 监控问题
2022/07/15 Servers