一. 数据丢失的原因
- vuex存储的数据只是在页面中,相当于全局变量,页面刷新的时候vuex里的数据会重新初始化,导致数据丢失。
- 因为vuex里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue实例,vuex里面的数据就会被重新赋值。
二 . 解决方法
这里将Vuex的数据存储到localStorage中,具体看下面代码
1. 在plugins.js文件中创建 store-cache.js
2. 在nuxt.config.js 中代码如下
plugins: [
{ src: '~/plugins/store-cache', ssr: false },
],
store-cache.js 文件代码如下
export default function(ctx) {
// 离开页面 刷新前 将store中的数据存到localStorage
window.addEventListener('beforeunload', () => {
localStorage.setItem("storeCache", JSON.stringify(ctx.store.state))
});
// 获取localStorage中的store数据
let storeCache = localStorage.getItem("storeCache")
if (storeCache) {
// 将localStorage中的store数据替换到store中
ctx.store.replaceState(Object.assign({},ctx.store.state,JSON.parse(storeCache))
)
}
}
这样就解决了Vuex刷新数据丢失的问题了,实现了数据持久化