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)


相关推荐

  • oracle 查询指定约束的关联表

    oracle 查询指定约束的关联表

  • 图文详解| Node.js安装及环境配置之Windows篇

    图文详解| Node.js安装及环境配置之Windows篇

  • 1146 mysql_MySQL错误处理–1146错误「建议收藏」

    1146 mysql_MySQL错误处理–1146错误「建议收藏」在MySQL的主从复制过程中,出现了1146错误。提示的错误原因是:在默认的数据中找不到指定的表。showslavestatus\G;现实的同步状态。Slave_IO_Running:YESSlave_SQL_Running:NoLast_Errno:1146Last_Error:Error’Table’coop.Coop_Data’doesn’texist’onquery…

  • 妥妥的世界第一:为什么MT4软件的地位无法撼动?

    妥妥的世界第一:为什么MT4软件的地位无法撼动?我是漆学军,2004年接触MT3.83的时候,还没有太在意,直到2005年,MT4正式推出之后,我就再也没有真正爱上别的软件,即便是MT4的升级版本MT5,我也一直提不起太大兴趣。外汇市场上有很多不同类型的交易软件,包括占领了大部分外汇交易市场的MT4、MT5、cTrader和各个机构自行研发的交易软件等等,然而,尽管竞争者很多,已经发布十六年了的MT4平台却依旧称得上是“交易软件之王”,市场占有率稳居世界第一,在外汇市场上具备不可动摇的地位。MT4平台简介MetaTrader4(MT4)..

  • Java工程师-招聘要求

    Java工程师-招聘要求工作职责: 1、负责后台系统的研发,及时解决项目涉及到的技术问题。 2、参与系统需求分析与设计,负责完成核心代码编写,接口规范制定3、参与后台服务性能效率优化岗位要求: 1、计算机相关专业毕业,有大数据高并发的处理经验,精通spring框架,阅读过spring源码,熟悉其事务机制 2、熟练应用Linux操作系统,熟悉GIT等版本管理软件3、掌握网站访问速度的各种优化方案,并提出优化方案更佳4、掌握…

  • 文件句柄资源

    文件句柄资源1、文件句柄限制可通过执行以下命令,查看单个进程最多可使用的文件句柄数量:1/#ulimit-n21024可通过执行以下命令,查看系统环境最多可使用的文件句柄数量:1/#cat

发表回复

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

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