vuex的作用
1,vuex是什么:一个状态管理插件,说人话:就是可以解决组件之间的数据共享问题和实现数据持久化。
vuex的优势:它相对sessionStorage,存储数据稍更安全点,sessionStorage在控制台可以被看到.
vuex的劣势:在刷新页面后,vuex会重新更新state,所以,存储的数据会丢失,因为store是存在于内存的。
解决vuex页面刷新消失的思路
思路:将state中的数据放在浏览器sessionStorage和localStorage中。
解决一:当页面刷新之前把vuex中的数据存入到localStorage中或sessionStorage,
所以在app.vue中加入以下代码
<template>
<div id="app">
<router-view />
</div>
</template>
<script>
// 入口组件
export default {
name: 'App',
created() {
// 在页面加载时读取sessionStorage里的状态信息
if (sessionStorage.getItem('store')) {
this.$store.replaceState(
Object.assign(
{},
this.$store.state,
JSON.parse(sessionStorage.getItem('store'))
)
)
}
// 在页面刷新时将vuex里的信息保存到sessionStorage里
// beforeunload事件在页面刷新时先触发
window.addEventListener('beforeunload', () => {
sessionStorage.setItem('store', JSON.stringify(this.$store.state))
})
},
}
</script>
你可能会问这么复杂为什么不直接使用sessionStorage呢?
因为vuex中的变量是响应式的,而localStorage和sessionStorage都不是响应式
当你改变vuex中的状态,组件会检测到改变,而localStorage和sessionStorage就不会了,页面要重新刷新才可以看到改变。所以应让vuex中的状态从localStorage/sessionStorage中得到,这样组件就可以响应式的变化