Manifest V3环境下适配vuex-persistentstate的window.localStorage替代方案

核心矛盾在于browser.storage.local是异步API，而原vuex-persistentstate依赖同步的localStorage，以下是三种可行的解决方案：

方案1：自定义Vuex异步存储插件 #

直接手写轻量插件适配browser.storage.local，无需第三方库：

// store/index.js
const asyncStoragePlugin = store => {
  // 初始化时从storage加载状态
  browser.storage.local.get('vuexState').then(res => {
    res.vuexState && store.replaceState(res.vuexState);
  });

  // 监听state变更，异步保存到storage
  store.subscribe((_, state) => {
    browser.storage.local.set({ vuexState: state });
  });
};

// 创建store时引入插件
const store = new Vuex.Store({
  state: { /* 你的初始状态 */ },
  mutations: { /* 你的mutations */ },
  plugins: [asyncStoragePlugin]
});

• 注意：初始化是异步过程，页面加载初期state可能为空，需在组件中处理加载状态（如显示占位提示）
• 若state体积较大，建议拆分存储，避免触发browser.storage.local的容量限制（通常约5MB）

方案2：用async/await封装异步操作 #

通过Vuex Action处理异步读写，贴合原有开发习惯：

// 封装storage工具函数
const storage = {
  async get(key) {
    const res = await browser.storage.local.get(key);
    return res[key];
  },
  async set(key, val) {
    await browser.storage.local.set({ [key]: val });
  }
};

// Vuex配置
const actions = {
  async loadSavedState({ commit }) {
    const savedState = await storage.get('vuexState');
    savedState && commit('REPLACE_STATE', savedState);
  },
  saveState({ state }) {
    storage.set('vuexState', state);
  }
};

const mutations = {
  REPLACE_STATE(state, newState) {
    Object.assign(state, newState);
  },
  // 其他mutations...
};

// 应用初始化时加载状态（如在根组件的created钩子）
async created() {
  await this.$store.dispatch('loadSavedState');
}

方案3：改造vuex-persistentstate适配异步存储 #

修改库的storage配置，替换为browser.storage.local的异步实现：

import createPersistedState from 'vuex-persistedstate';

const persistedPlugin = createPersistedState({
  storage: {
    getItem: async key => {
      const res = await browser.storage.local.get(key);
      return res[key];
    },
    setItem: async (key, val) => {
      await browser.storage.local.set({ [key]: val });
    },
    removeItem: async key => {
      await browser.storage.local.remove(key);
    }
  }
});

const store = new Vuex.Store({
  // 你的store配置
  plugins: [persistedPlugin]
});

• 注意：此方案下state初始化仍是异步的，需确保应用在状态加载完成后再渲染，避免数据不一致。

内容的提问来源于stack exchange，提问作者HIMANSHU SHARMA