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

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

众所周知,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.



写在最后

欢迎交流,提issue和pr,

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/100988.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • KETTLE 使用教程

    KETTLE 使用教程Kettle的建立数据库连接、使用kettle进行简单的全量对比插入更新:kettle会自动对比用户设置的对比字段,若目标表不存在该字段,则新插入该条记录。若存在,则更新。Kettle简介:Kettle是一款国外开源的ETL工具,纯java编写,可以在Window、Linux、Unix上运行,数据抽取高效稳定。Kettle中文名称叫水壶,该项目的主程序员MATT希望把各种数据放到一个…

  • idea集成svn使用教程_idea导入svn项目

    idea集成svn使用教程_idea导入svn项目1.查看svn仓库调出svn视图:连接svn服务器:连接后效果如下:补充:如果输入正确的连接地址后出现错误—系统找不到指定的文件请到设置中检查(File|Settings|VersionControl|Subversion)SVC客户端路径配置的对不对(选中bin目录下的svn.exe)?如果找不到svn.exe,看下图解释2.Idea集成svn如果不小心选错了其他选项,比如cvs,可以在settings中重新选择;…

    2022年10月18日
  • 丫丫考了100分_小明考了0分

    丫丫考了100分_小明考了0分CCF201812-1小明上学题目背景  小明是汉东省政法大学附属中学的一名学生,他每天都要骑自行车往返于家和学校。为了能尽可能充足地睡眠,他希望能够预计自己上学所需要的时间。他上学需要经过数段道路,相邻两段道路之间设有至多一盏红绿灯。  京州市的红绿灯是这样工作的:每盏红绿灯有红、黄、绿三盏灯和一个能够显示倒计时的显示牌。假设红绿灯被设定为红灯r秒,黄灯y秒,绿灯g秒,那…

  • 网页内容监控 – 怎么才能做到网站内容实时推送百度?「建议收藏」

    网页内容监控 – 怎么才能做到网站内容实时推送百度?「建议收藏」运用业界领先的爬虫技术,判断页面内容是否有新内容产出,并过滤非站内内容,然后将内容链接推送至百度各个数据推送接口(如熊掌号、移动专区等)。网页内容监控是什么?网页内容监控是指对网站的指定页面进行定时扫描,扫描时发现与上次扫描结果有差异时进行相应处理的程序或服务。通俗来讲,网页内容监控可以实现页面有变化了,通知相应负责人或者自动处理的功能。应用场景网页内容监控的应用场景还是很多的,各…

  • python怎么读取excel文件_python如何读取文件夹下的所有文件

    python怎么读取excel文件_python如何读取文件夹下的所有文件python读取excel文件如何进行python编程语言拥有着比较强大的excel读写能力,我们只需要安装xlrd,xlwt这两个库就可以了。那么python读取excel文件如何进行,今天就为大家分享下python读取excel文件的具体操作方法,快来了解下吧!1、首先说明我是使用的python3.5,我的office版本是2010,首先打开dos命令窗,安装必须的两个库,命令是:pip3installxlrdPip3installxlwt2、准备好excel,例如我的一个工作文件,我

  • 学生成绩管理系统数据库设计–MySQL/SQL Server[通俗易懂]

    学生成绩管理系统数据库设计–MySQL/SQL Server[通俗易懂]MySQL/SQLServer数据库设计(学生成绩管理系统)设计大纲1.项目背景及需求分析1.1项目背景1.2 需求分析1.2.1 信息需求1.2.2 功能需求1.2.3 安全性与完整性需求2. 概念结构设计2.1抽象出系统实体2.2全局E-R图3. 逻辑结构设计3.1关系模式3.2函数依赖识别3.3范式4. 物理设计和实施4.1数据库及表创建4.2表数据增删改查测试4.3创建视图4.4创建函数4.5创建存储过程4.6创建触发器

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号