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

最新推荐文章于 2024-08-17 17:24:28 发布

前端OnTheRun

最新推荐文章于 2024-08-17 17:24:28 发布

阅读量62

点赞数

分类专栏： vue 文章标签： vue.js javascript html5

本文链接：https://blog.csdn.net/rowlet/article/details/120302177

版权

vue 专栏收录该内容

41 篇文章 0 订阅

订阅专栏

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

摘要由CSDN通过智能技术生成

产生原因

因为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()]
})