2021-09-15 vuex刷新后数据丢失的解决方法

原创于 2021-09-16 20:17:49 发布 · 97 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #html5

vue 专栏收录该内容

46 篇文章

订阅专栏

当浏览器刷新时，Vue应用中的store数据会被重置。为了解决这个问题，可以将state数据保存到本地存储如sessionStorage中，或者使用vuex-persistedstate插件来实现数据持久化。通过在store.js中引入并配置这个插件，可以确保刷新页面后，Vuex的状态仍然能被保留。

产生原因

因为store是存储在运行内存中，当浏览器刷新时，会重新加载vue实例，store也会重新赋值

解决方法

1.将state里的数据保存一份到本地存储(localStorage、sessionStorage、cookie）中
用sessionStorage来保存state里的数据
2.使用vuex-persistedstate插件
store.js

import Vue from 'vue'
import Vuex from 'vuex'
 
import createPersistedState from 'vuex-persistedstate'
 
Vue.use(Vuex)
 
export default new Vuex.Store({
   //...
   plugins: [createPersistedState()]
})