vuex 数据持久化插件

最新推荐文章于 2024-10-10 13:52:08 发布

m0_64993153

最新推荐文章于 2024-10-10 13:52:08 发布

阅读量80

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/m0_64993153/article/details/123355710

版权

当使用Vuex管理状态时，页面刷新会导致数据丢失。为了解决这个问题，可以使用vuex-persistedstate插件实现数据持久化，确保登录状态、token等关键信息在刷新后仍能保留。安装该插件后，在Vuex的配置中引入并设置storage为window.localStorage，即可自动保存和恢复应用状态。

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

数据持久化：

刷新页面，vuex里面数据丢失、清空。有时候我们需要把一些数据固话到本地，即使刷新也不能清空，例如：登陆状态、token等。这是就需要用到vuex数据持久化

//需要先下载插件
npm install vuex-persistedstate --save 或者 使用
yarn add vuex-persistedstate --save

//在vuex初始化时导入插件
import persist from 'vuex-persistedstate'
//并使用
export default new Vuex.Store({
 state: {
 },
 mutations: {
 },
 actions: {
 },
 modules: {
 },
 plugins: [
   new persist({
     storage: window.localStorage,
   }),
 ],
 //会自动保存状态，刷新时不会丢失
})