vuex数据持久化插件（vuex-persistedstate）解决刷新页面数据消失的问题

最新推荐文章于 2024-08-22 09:13:34 发布

想成为工程师的菜鸟

最新推荐文章于 2024-08-22 09:13:34 发布

阅读量450

点赞数

分类专栏：前端文章标签： vue

本文链接：https://blog.csdn.net/qq_46177396/article/details/116484039

版权

前端专栏收录该内容

22 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue.js项目中使用Vuex进行状态管理，并通过vuex-persistedstate插件实现数据在sessionStorage中的持久化，确保页面刷新后状态仍然保留。插件简化了手动维护本地存储与Vuex状态同步的过程。

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

第一步安装插件

npm install vuex-persistedstate

第二步在 store/index.js 中引入

import Vue from 'vue'
import Vuex from 'vuex'
// vuex持久化插件
import createPersistedState from "vuex-persistedstate"

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  },
  getters:{
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  },
  plugins:[createPersistedState({
    storage:window.sessionStorage
  })]
})

原理

vuex持久化（如何操作）

   1、手动利用HTML5的本地存储
  		1.vuex的state在localStorage或sessionStorage中取值
  		2.在mutation中，定义的方法里对vuex的状态操作得同时对存储也做对应的操作
  		这样state就会和存储一起存在并且与vuex同步
  		
  2、利用vuex-persistedstate插件
  		** 插件的原理其实也是结合了存储方法，只是统一的配置就不需要手动每次都写存储方法