利用vuex-persistedstate将vuex本地存储实现
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() ]
关于vuex的本地存储就是这些。以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
Vue-cli Eslint在vscode里代码自动格式化的方法
本篇文章主要介绍了Vue-cli Eslint在vscode里代码自动格式化的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-02-02
vuex + axios 做登录验证 并且保存登录状态的实例
今天小编就为大家分享一篇vuex + axios 做登录验证 并且保存登录状态的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
在Vue中，父子组件之间通过Prop和Event实现了数据的双向绑定，但是，Vue设计者为什么不允许子组件修改父组件传递的Prop呢，本文就来带大家探究为什么子组件不能修改Prop,需要的朋友可以参考下2023-06-06
这篇文章主要为大家详细介绍了vue Echarts实现仪表盘案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要为大家分享了vue多级多选菜单组件开发案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-10-10
这篇文章主要介绍了vue2.x background:url()的踩坑记录，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
后端写个上传图片的接口可不是很简单，只需要让这个字段限制为图片格式，后台做个保存的逻辑就完事了，前端处理还要牵扯到请求头，数据格式的处理等等问题，按照老传统把图片按照字符串往接口put发现返回的全是400错误，直到我知道了前端的FormData方法！2021-05-05
Vue+Jwt+SpringBoot+Ldap完成登录认证的示例代码
本篇文章主要介绍了Vue+Jwt+SpringBoot+Ldap完成登录认证的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
一步步教你利用webpack如何搭一个vue脚手架（超详细讲解和注释）
这篇文章主要给大家介绍了软玉利用webpack如何搭一个vue脚手架的相关资料，文中有超详细讲解和注释，对大家学习或者使用webpack具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。2018-01-01
本篇文章介绍了如何使用 Vue3 实现一个鼠标经过显示按钮的效果,我们使用了 Vue3 的 Composition API 来创建响应式的数据,并使用了 @mouseover 和 @mouseleave 事件来监听鼠标的移入和移出事件,感兴趣的朋友一起看看吧2024-04-04
最新评论