利用vuex-persistedstate将vuex本地存储

·  阅读 1230

使用场景

最近在做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-persistedstate)解决页面刷新vuex数据丢失的问题

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改