Vuex-Persist 是一个用于在 Vuex 中实现持久化状态的库。它可以用来解决应用程序在刷新浏览器或关闭页面后丢失 Vuex store 中状态的问题。
具体来说，Vuex-Persist 可以用来：
1、在浏览器的本地存储（localStorage）中保存 Vuex store 的状态，以便在页面刷新或重新加载后自动还原该状态。
2、在会话存储（sessionStorage）中保存 Vuex store 的状态，以便在同一个会话期间保留该状态。
3、将 Vuex store 的状态保存到 cookie 中，以便在同一个浏览器中保留该状态。
4、将 Vuex store 的状态保存到 IndexedDB 中，以便在同一个浏览器中保留该状态。
通过使用 Vuex-Persist，您可以确保在刷新页面或重新加载应用程序时，不会丢失 Vuex store 中的状态。这可以帮助您提高用户体验，使用户可以在使用您的应用程序时保持其自定义设置和偏好。
其使用方法：
1. 安装 Vuex-Persist
可以使用 npm 或 yarn 安装 Vuex-Persist：
`npm install vuex-persist
`或者
`yarn add vuex-persist`
2. 在 Vuex store 中导入 Vuex-Persist
需要在 Vuex store 中导入 Vuex-Persist，然后创建一个新的 Vuex-Persist 插件，并将其添加到 Vuex 的插件列表中。以下是一个示例代码：```
import Vuex from 'vuex';
import VuexPersist from 'vuex-persist';
const vuexLocalStorage = new VuexPersist({
key: 'my-app',
storage: window.localStorage,
});
const store = new Vuex.Store({
// ...your store options
plugins: [vuexLocalStorage.plugin],
});```
在上面的代码中，我们首先导入了 Vuex 和 Vuex-Persist。然后，我们创建了一个新的 Vuex-Persist 插件，并将其添加到 Vuex 的插件列表中。在创建插件时，我们可以指定存储键的名称（'my-app'）以及要使用的存储引擎（在这种情况下是 localStorage）。
3. 启用自动重载
如果您希望在刷新页面或重新加载应用程序时自动还原 Vuex store 的状态，则需要启用自动重载。为此，您需要在创建插件时将 autoRehydrate 属性设置为 true：
```
const vuexLocalStorage = new VuexPersist({
key: 'my-app',
storage: window.localStorage,
autoRehydrate: true,
});```
4. 指定要持久化的状态
默认情况下，Vuex-Persist 将保存整个 Vuex store 的状态。如果您只想保存某些模块的状态，则可以在创建插件时指定模块的名称：
```
const vuexLocalStorage = new VuexPersist({
key: 'my-app',
storage: window.localStorage,
autoRehydrate: true,
});
```
在上面的代码中，我们只保存了名为 "auth" 和 "cart" 的模块的状态。
这就是使用 Vuex-Persist 在 Vue 应用程序中实现持久化状态的基本步骤。使用这个库，您可以轻松地将应用程序状态保存到本地存储、会话存储、cookie 或 IndexedDB 中，并在应用程序重新加载时自动还原该状态。