使用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 的异常处理机制
Nov 30 Vue.js
如何正确解决VuePress本地访问出现资源报错404的问题
Dec 03 Vue.js
Vue+element-ui添加自定义右键菜单的方法示例
Dec 08 Vue.js
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
Dec 25 Vue.js
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
Dec 30 Vue.js
vue实现验证用户名是否可用
Jan 20 Vue.js
vue+echarts实现中国地图流动效果(步骤详解)
Jan 27 Vue.js
Vue实现圆环进度条的示例
Feb 06 Vue.js
springboot+VUE实现登录注册
May 27 Vue.js
vue Element-ui表格实现树形结构表格
Jun 07 Vue.js
vue使用refs获取嵌套组件中的值过程
Mar 31 Vue.js
VUE使用draggable实现组件拖拽
Apr 06 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
php中文本操作的类
2007/03/17 PHP
php mysql数据库操作类
2008/06/04 PHP
PHP使用数组实现队列
2012/02/05 PHP
php全排列递归算法代码
2012/10/09 PHP
XAMPP安装与使用方法详细解析
2013/11/27 PHP
PHP简单实现上一页下一页功能示例
2016/09/14 PHP
Yii2.0中使用js异步删除示例
2017/03/10 PHP
PHP性能分析工具xhprof的安装使用与注意事项
2017/12/19 PHP
js判断选择的时间是否大于今天的代码
2013/08/20 Javascript
jquery+ajax+C#实现无刷新操作数据库数据的简单实例
2014/02/08 Javascript
浅谈Nodejs观察者模式
2015/10/13 NodeJs
javascript制作照片墙及制作过程中出现的问题
2016/04/04 Javascript
jQuery Ajax和getJSON获取后台普通json数据和层级json数据用法分析
2016/06/08 Javascript
jQuery的ajax下载blob文件
2016/07/21 Javascript
JQuery学习总结【二】
2016/12/01 Javascript
vue+echarts+datav大屏数据展示及实现中国地图省市县下钻功能
2020/11/16 Javascript
[00:58]他们到底在电话里听到了什么?
2017/11/21 DOTA
[01:04:35]2018DOTA2亚洲邀请赛 4.3 突围赛 Secret vs VG 第一场
2018/04/04 DOTA
分享一个常用的Python模拟登陆类
2015/03/29 Python
Python3多目标赋值及共享引用注意事项
2019/05/27 Python
深入了解python中元类的相关知识
2019/08/29 Python
为什么称python为胶水语言
2020/06/16 Python
python实现xlwt xlrd 指定条件给excel行添加颜色
2020/07/14 Python
python根据用户需求输入想爬取的内容及页数爬取图片方法详解
2020/08/03 Python
飞利浦比利时官方网站:Philips比利时
2016/08/24 全球购物
Skyscanner新西兰:全球领先的旅游搜索网站
2019/08/26 全球购物
Linux管理员面试题 Linux admin interview questions
2016/07/08 面试题
行政前台岗位职责
2013/12/04 职场文书
对孩子的寄语
2014/04/09 职场文书
学校安全生产承诺书
2014/05/23 职场文书
教师节慰问信
2015/02/15 职场文书
学习保证书怎么写
2015/02/26 职场文书
学者《孟子》名人名言
2019/08/09 职场文书
创业项目大全(适合在家创业的项目)
2019/08/15 职场文书
MySQL安装失败的原因及解决步骤
2022/06/14 MySQL
win10系统计算机图标怎么调出来?win10调出计算机图标的方法
2022/08/14 数码科技