持久化 Vuex：告别浏览器刷新数据丢失的烦恼

2024-01-04 17:14:58

对于 Vue.js 应用来说，数据状态管理是至关重要的。Vuex 是一个流行的状态管理库，它允许我们以一个集中式、可预测的方式管理应用程序状态。然而，默认情况下，Vuex 的状态是暂时的，这意味着当浏览器刷新或关闭时，数据将丢失。

本篇文章将探讨如何使用 Vuex 持久化插件来解决这个问题，让我们的 Vuex 状态在浏览器刷新后仍然存在。

Vuex 持久化插件

Vuex 持久化插件是一个库，它允许我们轻松地将 Vuex 状态持久化到浏览器存储中（例如 localStorage）。通过使用这个插件，我们可以确保即使在浏览器刷新或关闭后，我们的状态仍然可用。

实施步骤

安装 Vuex 持久化插件：

npm install --save vuex-persist

在 Vuex 存储中安装插件：

import VuexPersist from 'vuex-persist'

const vuexLocal = new VuexPersist({
  key: 'vuex', // 存储数据的 key
  storage: window.localStorage, // 使用 localStorage 存储
})

export default new Vuex.Store({
  plugins: [vuexLocal.plugin],
})

用法

使用 Vuex 持久化插件后，我们可以在任何 Vuex 状态上使用 persist 选项。这会告诉插件要将该状态持久化到存储中。例如：

const store = new Vuex.Store({
  state: {
    count: 0,
  },
  getters: {
    doubleCount: state => state.count * 2,
  },
  mutations: {
    increment(state) {
      state.count++
    },
  },
  modules: {
    // 持久化 'user' 模块的状态
    user: {
      state: {
        name: 'John Doe',
      },
      getters: {
        fullName: state => state.name + ' Doe',
      },
      mutations: {
        setName(state, name) {
          state.name = name
        },
      },
      plugins: [vuexLocal.plugin], // 将插件应用于模块
    },
  },
})