Vuex持久化插件(vuex-persistedstate)解决页面刷新vuex数据丢失的问题

·  阅读 1612

想要在页面刷新后保存数据,原始的方法就是将数据放在浏览器的sessionStorage和localStorage中,现在还可以使用vuex来存储数据

vuex与sessionStorage的比较:

vuex优势:相比sessionStorage,数据存储更安全,因为sessionStorage的数据在控制台可以被看到

vuex劣势:在刷新页面后,vuex会重新更新state,存储的数据会丢失

vuex可以进行全局的状态管理,但是刷新页面数据会丢失这会导致项目开发变得棘手,那现在有两种解决方式

1. 手动利用本地存储

基本思路:由于我们是在页面刷新的时候才会丢失state里的数据,那么我们可以在页面你刷新之前先将state数据保存到sessionStorage,然后再刷新页面。这时候我们就可以用到beforeunload这个事件,但是总不能每个页面都监听这个事件吧,所以我们把它放在app.vue这个入口文件中,就可以保证每次刷新页面都可以触发。

具体代码如下:

export default {
  name: 'myApp',
  created () {
    //在页面加载时读取sessionStorage里的状态信息
    if (sessionStorage.getItem("store") ) {
        this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store"))))
    } 

    //在页面刷新时将vuex里的信息保存到sessionStorage里
    window.addEventListener("beforeunload",()=>{
        sessionStorage.setItem("store",JSON.stringify(this.$store.state))
    })
  }
}
复制代码

但是手动写毕竟是比较麻烦的,那么我们可以利用插件

2. 利用vuex-persistedstate插件

这个插件的原理其实也是结合了存储方式,只是统一配置后就不需要手动写存储方法了

具体使用方法如下:

(1) 安装

npm install vuex-persistedstate --save
复制代码

(2)在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,    
        }),  
    ],
})
复制代码

同理也可以存储到cookie下

默认持久化所有的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

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