轻松玩转Vuex-Persist，实现Vuex状态持久化！

2023-09-30 15:01:27

每天学习一个Vue插件（25）——Vuex-Persist

前言

在Vue项目中，状态管理是一个非常重要的环节。Vuex作为一款流行的状态管理库，能够帮助我们轻松管理和共享应用程序的状态。然而，默认情况下，Vuex的状态并不会持久化，一旦页面刷新，所有状态都会丢失。为了解决这个问题，我们可以使用Vuex-Persist插件来实现状态持久化。

介绍

Vuex-Persist是一个轻量级、无状态的Vuex插件，它允许我们将Vuex的状态持久化到本地存储（localStorage或sessionStorage）或Cookie中。这样，即使页面刷新或用户关闭浏览器，状态也不会丢失。

构造函数

Vuex-Persist的构造函数接受一个配置对象作为参数，我们可以通过这个配置对象来指定要持久化的状态、持久化的方式以及持久化的位置等。

配置项属性

属性	类型	默认值	说明
storage	string	'local'	指定持久化的位置，可以是'local'（本地存储）、'session'（会话存储）或'cookie'（Cookie）
modules	object	{}	指定要持久化的模块，可以使用通配符'*'匹配所有模块
key	string	'vuex'	指定持久化的键，用于在本地存储、会话存储或Cookie中存储数据

配置项方法

方法	参数	返回值	说明
reducer	(state, payload) => any	any	指定持久化时如何处理状态，可以用来过滤掉不必要的状态
filter	(mutation) => boolean	boolean	指定哪些mutation可以触发状态持久化

使用

安装

npm install vuex-persist --save

配置

在Vuex store中使用Vuex-Persist，我们需要在store的构造函数中传入Vuex-Persist插件：

import VuexPersist from 'vuex-persist';
import Vuex from 'vuex';

const store = new Vuex.Store({
  plugins: [new VuexPersist({
    storage: 'local',
    modules: ['user'],
    key: 'my-app',
    reducer: (state) => ({
      user: state.user,
    }),
    filter: (mutation) => mutation.type !== 'resetState',
  })],
});

状态持久化

现在，只要我们修改Vuex的状态，Vuex-Persist就会自动将状态持久化到本地存储中。例如，我们可以这样修改用户的状态：

store.commit('setUser', {
  name: 'John Doe',
  email: 'johndoe@example.com',
});

当我们刷新页面或关闭浏览器，然后重新打开时，用户的状态仍然存在：

console.log(store.state.user); // { name: 'John Doe', email: 'johndoe@example.com' }

注意

在使用Vuex-Persist时，我们需要特别注意以下几点：

Vuex-Persist不会持久化Vuex的状态树中的所有状态，只有配置了要持久化的模块和状态才会被持久化。
Vuex-Persist不会监听Vuex的状态变化，只有当触发了配置的mutation时，Vuex-Persist才会将状态持久化到本地存储中。
Vuex-Persist使用JSON.stringify()方法将状态序列化为字符串，然后将其存储在本地存储中。因此，如果状态中包含不能被JSON序列化的对象，则这些对象将不会被持久化。