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()
]

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• JavaScript如何实现一维数组变三维数组？

  JavaScript如何实现一维数组变三维数组？一些朋友对怎么将一维数组转为三维数组比较好奇，其实在JavaScript中实现这个需求比不难，接下来小编就通过一个示例给大家介绍一个实现方法，感兴趣的朋友就继续往下看吧。

• 微信小程序中怎样实现分页加载？

  本文主要介绍微信小程序中怎样实现分页加载的内容，对于分页加载的功能还是比较常见的，应用场景有很多，像微信朋友圈，微博，新闻类网站等等这些，因为数据信息很多，分页加载的功能有很大用处，能很好的提高用户体验。那么下面我们就来看一个微信小程序实现分页加载的示例，需要的朋友可以参考。

• jQuery怎样实现任意点击隐藏div的效果？

  jQuery怎样实现任意点击隐藏div的效果？我们一些网站经常能看到通过点击任意位置后关闭打开div的效果，这样的好处是能提高用户的体验，那么具体怎样实现这一效果呢？

• jQuery命名冲突问题的处理方案有哪些

  Jquery命名冲突解决办法很简单，只需要给jquery取一个别名即可，传统$命名形式我们都是这样使用jquery的，入下所示： scripttype=text/javascriptjQuery(function($){//thiswillsetthedivstexttoHello.$(#myDiv).text(Hello);});/scriptdivid=myDivText/div

• JS中FontFace对象如何创建，具体有什么应用

  JavaScript中FontFace对象的使用方式 目录 介绍 兼容性 创建FontFace对象 FontFace对象属性 FontFace对象方法 将创建的FontFace字体添加到页面中 通过字体Promise回调添加 通过Ajax获取字体文件后回调添加 页面中使用我们添加的字体 css事先定义好 通过js更改元素的字体 FontFace字面理解就是字体脸,也就是文字字体样式的意思,它是通过使用javascript来定义字体对象,并且引入客户端没有安装得字体文件,可以是者服务器端,或者是第三方字体库文件. 介绍 基本语法: concat fo