使用 Vuex 持久化数据

注意

本文针对 Vue 2。Vue 3 现已推出，是使用 Vue 开发应用程序的推荐方式。

常见的存储这些信息的方法包括 IndexDB、LocalStorage 和 Cookies。这些工具允许我们通过各种 API 在当时使用的浏览器中存储信息。

当使用 vuejs 和 vuex 来管理 state 时，它便于在整个应用程序中处理集中的状态，这种状态是响应式的，并与框架的其余部分保持一致。然而，默认情况下，vuex 不提供在浏览器会话之间甚至在刷新页面时持久保存其信息的能力。这导致我们使用一个名为 vuex-persistedstate 的 vuex 插件。

了解更多关于 Vuex 的信息

在我们的项目中使用 vuex-persistedstate 非常简单。我们首先使用以下命令将模块添加到项目中：

bash

$ npm install --save vuex-persistedstate

在加载 vuex 的文件中，我们继续添加插件：

javascript

import Vue from 'vue';
import Vuex from 'vuex';
// 要添加的插件
import createPersistedState from 'vuex-persistedstate';

Vue.use(Vuex);

const store = new Vuex.store({
  state: {},
  mutations: {},
  actions: {},
  getters: {},
  // 在此处添加插件  
  plugins: [createPersistedState()],
});

通过将此插件作为 store 的一部分，从现在开始，保存在 vuex 中的所有信息都将在浏览器中持久保存。默认情况下，vuex-persistedstate 将状态存储在 LocalStorage 中。如果要手动删除存储的信息，可以从浏览器的"开发者工具"中进行操作。为此，请导航到"Application"选项卡，在"Storage"下选择"Local Storage"，然后删除要擦除的信息。

开发者工具中的 LocalStorage

这是在你想要完全清空 vuex 的情况下。但是，我们可以像通常操作 state 一样，通过代码来操作和删除信息。

使用 Vuex 持久化数据 ​

使用 Vuex 持久化数据