Vuex数据持久化存储

最新推荐文章于 2024-08-09 21:51:11 发布

原创

最新推荐文章于 2024-08-09 21:51:11 发布 · 1.2k 阅读

4 ·

CC 4.0 BY-SA版权

在Vue的SPA应用中，使用vuex管理和持久化数据是常见需求。然而，页面刷新会导致vuex中的数据丢失。本文介绍了两种解决方案：vuex-persistedstate和vuex-persist，它们分别通过localStorage和sessionStorage实现vuex数据的持久化。通过安装和配置插件，可以实现state的持久存储，确保页面刷新后数据不丢失。这两种方法在实际开发中都有效，可以根据项目需求选择合适方案。

业务需求：
在基于vue开发SPA项目时，为了解决页面刷新后数据丢失的问题，我们一般都是将数据存储在localstorage或sessionstorage中；当数据需要全局处理统一管理时，我们也会借助于vue官方提供的vuex来进行数据的统一管理。vuex相比localstorage或sessionstorage来说，存储数据更安全些。与此同时，vuex也存在一些弊端，当页面刷新后，vuex中state存储的数据同时也会被更新，vuex中存储的数据不能持久化，需要监听处理来维持vuex存储的数据状态持久化。
为解决页面刷新后vuex中存储的数据状态不能持久化的问题，我采取的方案是借助第三方插件工具来实现vuex数据的持久化存储，来解决页面刷新后数据更新的问题。

方案一：vuex-persistedstate

安装插件

yarn add vuex-persistedstate
// 或
npm install --save vuex-persistedstate

使用方法

import Vuex from "vuex";
// 引入插件
import createPersistedState from "vuex-persistedstate";

Vue.use(Vuex);

const state = {
   
   };
const mutations = {
   
   };
const actions = {
   
   };

const store = new Vuex.Store({
   
   
	state,
	mutations,
	actions,
  /* vuex数据持久化配置 */
	plugins

最低0.47元/天解锁文章