Nuxt配置vuex-persistedstate 和 localforage 实现持久化

1.安装必要的包:

npm install vuex-persistedstate localforage
 

2.配置 vuex-persistedstate 插件:

创建一个插件文件，如 plugins/persistedstate.js，并配置 vuex-persistedstate 插件。

import createPersistedState from "vuex-persistedstate";
import localForage from "localforage";

export default async ({ store }) => {
  if (process.client) {
    // 1. 恢复状态
    let persistedState = await localForage.getItem("vuex");
    if (persistedState) {
      persistedState = JSON.parse(persistedState);
    }
    if (persistedState && Object.keys(persistedState).length > 0) {
      store.commit("setData", persistedState); 
    }

    // 2. 创建持久化设置
    const persistedStatePlugin = createPersistedState({
      key: "vuex",
      paths: ["themeColor"],
      storage: {
        getItem: (key) => localForage.getItem(key),
        setItem: (key, value) => localForage.setItem(key, value),
        removeItem: (key) => localForage.removeItem(key),
      },
    });

    // 3. 使用持久化插件
    window.onNuxtReady(() => {
      persistedStatePlugin(store);
    });
  }
};


//vuex
  //通用的提交数据的方法
  setData(state, param) {
    for (let i in param) {
      if (i == "avatar" && param[i].indexOf("https") < 0) {
        state[i] = param[i].replace("http", "https");
      } else {
        state[i] = param[i];
      }
    }
  },

3.在 nuxt.config.js 中引入此插件:

// nuxt.config.js
export default {
  plugins: [
    { src: '~/plugins/persistedstate.js', mode: 'client' }
  ]
}

4.确保初始化顺序正确:

由于 localforage 是异步的，确保在应用初始化时，状态从 localforage 中已经完全恢复再初始化 Vuex 状态。这通常需要在 Nuxt 的 window.onNuxtReady 方法内部进行