Vuex 持久化存储

以下是一篇关于 Vuex 持久化存储在 Vue3 中的博客内容，并附上相关代码示例。

一、Vuex 在 Vue3 中的状态管理与持久化存储需求

在 Vue3 的开发中，Vuex 依然扮演着重要的状态管理角色。然而，Vuex 本身并不是持久化存储。这意味着当页面刷新或用户重新加载页面时，存储在 Vuex 中的状态可能会丢失。

例如，我们在页面中使用了 Vuex 的 state 值，假设初始值为一，将其修改为二后，一旦刷新页面，状态又回到了初始值一。这是因为 Vuex 存储的数据并非持久化的。

二、实现 Vuex 持久化存储的方法

在 Vue3 中，我们可以通过以下两种方式实现 Vuex 的持久化存储：

1. 自己编写代码使用本地存储（local storage）
   • 可以在 Vuex 的 mutations 或 actions 中手动将需要持久化的数据存储到 local storage 中，并在适当的时候从 local storage 中读取数据恢复 Vuex 的状态。
   • 以下是一个简单的示例代码：

import { createStore } from 'vuex';

const store = createStore({
  state: {
    number: 1
  },
  mutations: {
    increment(state) {
      state.number++;
      localStorage.setItem('myNumber', state.number);
    },
    restoreState(state) {
      const storedNumber = localStorage.getItem('myNumber');
      if (storedNumber) {
        state.number = parseInt(storedNumber);
      }
    }
  }
});

// 在应用启动时调用 restoreState 恢复状态
store.commit('restoreState');

export default store;

1. 使用插件
   • 在 Vue3 中，可以使用专门的 Vuex 持久化存储插件，这些插件通常提供了更便捷的方式来实现持久化存储。
   • 以常用的 vuex-persistedstate 插件为例，安装和使用方法如下：
   • 首先安装插件：npm install vuex-persistedstate
   • 然后在 Vuex 的 store 中引入并配置插件：

import { createStore } from 'vuex';
import createPersistedState from 'vuex-persistedstate';

const store = createStore({
  state: {
    number: 1
  },
  plugins: [
    createPersistedState({
      storage: window.localStorage,
      paths: ['number']
    })
  ]
});

export default store;

三、持久化存储的应用场景

一般在登录完成后，我们可能会往 Vuex 中存储一些重要的信息，比如 token 值等。通过持久化存储这些数据，可以确保用户在下次访问应用时，仍然能够保持登录状态，提高用户体验。

总之，在 Vue3 开发中，了解 Vuex 的非持久化特性以及掌握实现持久化存储的方法是非常重要的，可以帮助我们更好地管理应用的状态，提高应用的可靠性和用户体验。