目录
背景
登录的时候把用户信息存储到vue.store中,同时页面上也会显示用户名等信息。
问题
当页面刷后,就会发现 用户名 消失了解决
方法一 持久化vuex (不推荐)
感觉蛮好用的, 测试后才发现,太迟久了,我退出浏览器后,用户信息都还留着QAQ
1 安装插件
npm install vuex-persistedstate --save
2 加载
在store/index.js中加载插件
import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate' // vuex持久化
Vue.use(Vuex);
export default new Vuex.Store({
modules: {
...
},
getters: {
...
},
plugins: [createPersistedState()] // vuex持久化
})
方法二 跟本地存储写作
经过检查发现是,页面刷新后store中数据被清空。
store是用来存储组件状态的。刷新页面时,vue实例重新加载,store会被重置。所以,一些不应该被重置的数据,应该使用本地存储来进行存储。
本地存储
- cookie: 不适合大量数据的存储。
- localStorage: 是永久存储,浏览器关闭后数据不会丢失,除非主动删除数据。当关闭页面后重新打开,会读取上一次打开的页面数据。
- sessionStorage: 在浏览器当前窗口关闭后自动删除。
总结:sessionStorage 比较合适存储用户信息,当浏览器关闭后,自动清楚数据。
beforeunload 会在页面刷新时触发:
只要监听 beforeunload ,让页面在刷新前将数据存到 sessionStorage 中;
在页面刷新后,读取 sessionStorage 中的数据到 store 中,即可实现store信息的即时存储。
app.vue
<!--app.vue-->
<template>
</template>
<script>
export default {
name: 'App',
data() {
return {
}
},
created() {
// 在页面加载时读取sessionStorage里的状态信息
if (sessionStorage.getItem('store')) {
this.$store.replaceState(
Object.assign(
{},
this.$store.state,
JSON.parse(sessionStorage.getItem('store'))
)
)
// console.log(JSON.parse(sessionStorage.getItem('store'))) // 打印
}
// 在页面刷新时将vuex里的信息保存到sessionStorage里
// beforeunload事件在页面刷新时先触发
window.addEventListener('beforeunload', () => {
sessionStorage.setItem('store', JSON.stringify(this.$store.state))
// console.log(JSON.parse(sessionStorage.getItem('store'))) // 打印
})
},
}
</script>