vuex刷新页面后如何解决丢失store的数据问题
目录
- vuex刷新页面后丢失store的数据
- 提出问题
- 解决方案
- vuex刷新页面数据丢失(数据持久化)
- 存储到localStorage中
- 存储到sessionStorage中
- 指定数据持久化
- 总结
vuex刷新页面后丢失store的数据
提出问题
最近遇到个问题,vue中vuex中的store数据,会在页面刷新后初始化,为了解决这一问题决定将store里面数据在页面刷新前保存到sessionStorage,至于为何用他,因为页面关闭后他会被清空,localStorage则会一直存在,cookie又太小,因此sessionStorage最合适。
解决方案
在app.vue的created方法中读取sessionstorage中的数据存储在store中,此时用vuex.store的replaceState方法,替换store的根状态
在beforeunload方法中将store.state存储到sessionstorage中。
export default { name: 'app', created () { // 在页面加载时读取sessionStorage if (sessionStorage.getItem('store')) { this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem('store')))) } // 在页面刷新时将store保存到sessionStorage里 window.addEventListener('beforeunload', () => { sessionStorage.setItem('store', JSON.stringify(this.$store.state)) }) } }
vuex刷新页面数据丢失(数据持久化)
前提:
为什么要让vuex数据持久化:
在使用vuex的时候,会发现刷新页面之后state中存储的数据会被重置,因为刷新浏览器的时候会导致整个页面重新加载,vuex的state也会全部重新加载,所以为了防止这类情况的发生,我们会将vuex中的数据进行本地存储,防止页面刷新丢失vuex中的数据。
存储到localStorage中
首先安装vuex-persistedstate
npm install vuex-persistedstate -S
vuex-persistedstate默认存储到localStorage,使用如下:
在store文件夹下面的index.js中引入
import Vue from 'vue' import Vuex from 'vuex' import createPersistedState from "vuex-persistedstate" Vue.use(Vuex) const store = new Vuex.Store({ plugins: [createPersistedState()], })
存储到sessionStorage中
使用vuex-persistedstate存储到sessionStorage,如下:
import Vue from 'vue' import Vuex from 'vuex' import createPersistedState from "vuex-persistedstate" Vue.use(Vuex) const store = new Vuex.Store({ plugins: [createPersistedState({ storage: window.sessionStorage })], })
指定数据持久化
使用vuex-persistedstate指定需要持久化的state数据,如下:
import Vue from 'vue' import Vuex from 'vuex' import createPersistedState from "vuex-persistedstate" Vue.use(Vuex) const store = new Vuex.Store({ plugins: [createPersistedState({ storage: window.sessionStorage, // 方法1:用reducer,这里的val是由store里面的所有state,不加reducer为储存所有,reducer为指定存储 reducer(val) { return { // 只储存state中的name keyName: val.name } } // 方法2:用paths,数组里面填模块名,存储指定模块 // paths: ['Home', 'Order'] })] })
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。
赞 (0)