vuex刷新后数据丢失解决方案

最新推荐文章于 2024-10-11 18:22:17 发布

橙可爱

最新推荐文章于 2024-10-11 18:22:17 发布

阅读量134

点赞数

分类专栏： vuex

本文链接：https://blog.csdn.net/weixin_42332641/article/details/111639149

版权

vuex 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

该博客介绍了如何使用vuex-persistedstate插件来解决页面刷新后数据丢失的问题。通过安装和配置该插件，可以将Vuex状态自动保存到localStorage或sessionStorage中，甚至可以选择性地保存特定状态。此外，还展示了如何将数据存储到cookie以及如何指定要持久化的数据部分。

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

页面刷新后，想恢复刷新之前的某些数据状态，我们总是习惯于将数据放在浏览器的sessionStorage和localStorage中。但是有个新的插件默认存入缓存，很好的解决了页面刷新的问题。
一：安装依赖

npm install vuex-persistedstate  --save

二：在store下的index.js中，引入并配置

import Vue from 'vue'
import Vuex from 'vuex'
//引入插件
import createPersistedState from "vuex-persistedstate";
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    userNames:"",
    count: 0
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  },
  // 会自动保存创建的状态
  //默认存储到localStorage  
  plugins: [createPersistedState()]
})

注意：
默认存储到localStorage
想要存储到sessionStorage，配置如下

 plugins: [createPersistedState({
  storage: window.sessionStorage
 })]

存在cookie中时 plugins的配置如下：

 plugins: [
    persistedState({
      storage: {
        getItem: key => Cookies.get(key),
        setItem: (key, value) => Cookies.set(key, value, { expires: 7 }),
        removeItem: key => Cookies.remove(key)
      }
    })
  ]

指定某个需要持久化的数据

 plugins: [createPersistedState({
	  storage: window.sessionStorage,
		  reducer(value) {
		   return {
		   // 只储存state中的goodList
		   assessmentData: value.goodList
		  }
	  }
 })]

在这里插入图片描述