新西兰服务器

怎么利用vuex-persistedstate将vuex本地存储


怎么利用vuex-persistedstate将vuex本地存储

发布时间:2022-04-29 17:15:30 来源:高防服务器网 阅读:70 作者:iii 栏目:开发技术

本篇内容主要讲解“怎么利用vuex-persistedstate将vuex本地存储”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么利用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-persistedstate将vuex本地存储”有了更深的了解,不妨来实际操作一番吧!这里是高防服务器网网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

[微信提示:高防服务器能助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。

[图文来源于网络,不代表本站立场,如有侵权,请联系高防服务器网删除]
[