使用vuex-persistedstate本地存储vuex


Posted in Vue.js onApril 29, 2022

vuex-persistedstate将vuex本地存储

使用场景

最近在做Vue项目中的登录模块,登陆成功后获取到token,将token存储在vuex中,然而我发现切换路由后vuex中的数据都恢复默认了,原来页面刷新之后vuex的数据都会恢复默认。而后面进行鉴权处理需要token,于是我们要将vuex中的数据进行本地存储。

这里就用到了vuex持久化插件vuex-persistedstate

Vuex-persistedstate

这个插件的原理结合了存储方式,只是统一配置后就不需要手动写存储方法了

使用方法:

安装

npm install vuex-persistedstate --save

在store下的index.js中引入配置

import { createStore } from 'vuex'
import createPersistedState from 'vuex-persistedstate'
export default createStore({  
    state: {  },  
    mutations: {  },  
    actions: {  },  
    modules: {  },  
    plugins: [    
        createPersistedState(),  
    ],
})

这样是默认存储到localStorage,如果想要存储到sessionStorage,配置如下

import { createStore } from 'vuex'
import createPersistedState from 'vuex-persistedstate'
export default createStore({  
    state: {  },  
    mutations: {  },  
    actions: {  },  
    modules: {  },  
    plugins: [    
        // 把vuex的数据存储到sessionStorage    
        createPersistedState({      
            storage: window.sessionStorage,    
        }),  
    ],
})

默认持久化所有的state,如果想要存储指定的state,配置如下

import { createStore } from 'vuex'
import createPersistedState from 'vuex-persistedstate'
export default createStore({  
    state: {  },  
    mutations: {  },  
    actions: {  },  
    modules: {  },  
    plugins: [    
        // 把vuex的数据存储到sessionStorage    
        createPersistedState({      
            storage: window.sessionStorage,      
            reducer(val) {        
                return {          
                    // 只存储state中的userData          
                    userData: val.userData        
                }      
            }    
        }),  
    ],
})

API

  • key:存储持久状态的key(默认vuex)
  • paths:部分持续状态的任何路径的数组。如果没有路径给出,完整的状态是持久的。(默认:[])
  • reducer:一个函数,将被调用来基于给定的路径持久化的状态。默认包含这些值。
  • subscriber:一个被调用来设置突变订阅的函数。默认为store => handler => store.subscribe(handler)
  • storage:而不是(或与)getState和setState。默认为localStorage。
  • getState:将被调用以重新水化先前持久状态的函数。默认使用storage。
  • setState:将被调用来保持给定状态的函数。默认使用storage。
  • filter:将被调用来过滤将setState最终触发存储的任何突变的函数。默认为() => true

vuex的本地存储

vuex是什么

Vuex是一个专为 Vue.js 应用程序开发的状态管理模式

vuex就是一个仓库 众所周知就是存放公共数据的一个地方 任何组件内的都可以使用vuex中的数据

vuex中的五大核心

  • State

存放Vuex store实例的状态对象,用于定义共享的数据, 以及设定的变量

  • Action

向store发出调用通知,去执行异步操作

  • Mutations

它只用于修改state中定义的状态变量 , 相当于vue当中methods 来进行逻辑的代码操作

  • Modules

对state进行分类处理,相当于模块

  • getters

外部程序通过它获取变量的具体值,或者在取值前做一些计算(可以认为是store的计算属性)

  • plugins

这个是数组展示 而不是以对象形式展示 ,数组当中是对象的形式 数组当中存放vuex的本地存储

  • vuex-persist

是vuex是一个插件 数据的缓存, 跟localStorage是一个本质的意思,将数据存储在用户的本地,当然这个插件的特性只能在vuex当中使用,在vue中就使用不了

那么 vuex-persist 如何使用

在终端当中下载

cnpm install vuex-persist -save

下载完成后 还需要在vuex当中引入

import vuexPersist from 'vuex-persist';

引入之后需要在 export default 当中 实例化出

plugins:[
    new vuexPersist({
        localstorage:window.localStorage,
    }).plugin,
],

new 一个对象出 对象中写入 localStorage

new 出的对象需要跟引入的 名字相同

当然vuex的本地存储还有一种方式

以上方式相对来说复杂

在终端当中直接下载

cnpm install vuex-persistedstate -save

在plugins 中直接调用即可 这种方法先对简单 不需要再去new一下

plugins: [
Persist()
]

Tags in this post...

Vue.js 相关文章推荐
基于vue与element实现创建试卷相关功能(实例代码)
Dec 07 Vue.js
vue3+typeScript穿梭框的实现示例
Dec 29 Vue.js
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
Jan 05 Vue.js
详解Vue3.0 + TypeScript + Vite初体验
Feb 22 Vue.js
如何使用vue3打造一个物料库
May 08 Vue.js
vue组件的路由高亮问题解决方法
May 11 Vue.js
如何理解Vue简单状态管理之store模式
May 15 Vue.js
vue实现同时设置多个倒计时
May 20 Vue.js
在vue中import()语法不能传入变量的问题及解决
Apr 01 Vue.js
vue3引入highlight.js进行代码高亮的方法实例
Apr 08 Vue.js
vue代码分块和懒加载非必要资源文件
Apr 11 Vue.js
vue项目打包后路由错误的解决方法
Apr 13 Vue.js
详解Vue3使用axios的配置教程
Apr 29 #Vue.js
vue生命周期钩子函数以及触发时机
Apr 26 #Vue.js
vue里使用create, mounted调用方法
vue elementUI批量上传文件
Apr 26 #Vue.js
vue.js 使用原生js实现轮播图
Apr 26 #Vue.js
如何vue使用el-table遍历循环表头和表体数据
vue 把二维或多维数组转一维数组
Apr 24 #Vue.js
You might like
数字转英文
2006/12/06 PHP
php5.3中连接sqlserver2000的两种方法(com与ODBC)
2012/12/29 PHP
php中使用Ajax时出现Error(c00ce56e)的详细解决方案
2014/11/03 PHP
腾讯CMEM的PHP扩展编译安装方法
2015/09/25 PHP
Zend Framework数据库操作技巧总结
2017/02/18 PHP
用javascript实现画板的代码
2007/09/05 Javascript
一段利用WSH修改和查看IP配置的代码
2008/05/11 Javascript
JS实现的数组全排列输出算法
2015/03/19 Javascript
JS动态修改iframe内嵌网页地址的方法
2015/04/01 Javascript
举例讲解AngularJS中的模块
2015/06/17 Javascript
javascript实现在下拉列表中显示多级树形菜单的方法
2015/08/12 Javascript
完美JQuery图片切换效果的简单实现
2016/07/21 Javascript
javascript中的try catch异常捕获机制用法分析
2016/12/14 Javascript
详解用node编写自己的cli工具
2017/05/23 Javascript
Ionic + Angular.js实现验证码倒计时功能的方法
2017/06/12 Javascript
从parcel.js打包出错到选择nvm的全部过程
2018/01/23 Javascript
webpack+vuex+axios 跨域请求数据的示例代码
2018/03/06 Javascript
详解基于Vue-cli搭建的项目如何和后台交互
2018/06/29 Javascript
ES6 如何改变JS内置行为的代理与反射
2019/02/11 Javascript
Vue filter 过滤当前时间 实现实时更新效果
2019/12/20 Javascript
Python 实现12306登录功能实例代码
2018/02/09 Python
浅谈python中对于json写入txt文件的编码问题
2018/06/07 Python
漂亮的Django Markdown富文本app插件的实现
2019/01/02 Python
4行Python代码生成图像验证码(2种)
2020/04/07 Python
20行Python代码实现视频字符化功能
2020/04/13 Python
解决python Jupyter不能导入外部包问题
2020/04/15 Python
利用keras使用神经网络预测销量操作
2020/07/07 Python
python 三种方法提取pdf中的图片
2021/02/07 Python
HTML5头部标签的一些常用信息小结
2016/10/23 HTML / CSS
strlen的几种不同实现方法
2013/05/31 面试题
什么是反射
2012/03/17 面试题
简历中自我评价范文3则
2013/12/14 职场文书
艺校音乐专业自我鉴定范文
2014/03/01 职场文书
企业办公室岗位职责
2014/03/12 职场文书
机关领导查摆四风思想汇报
2014/09/13 职场文书
教师法制教育培训学习心得体会
2016/01/14 职场文书