Chrome扩展多入口场景下如何实现同一Vuex Store实例状态共享

Chrome扩展的background、content script、popup属于独立的运行上下文，默认不会共享JS实例，你原来的写法会在每个上下文单独创建Store实例，自然无法同步状态。我们可以利用background脚本生命周期最长的特性，将唯一Store实例托管在background中，其他脚本直接复用即可。

步骤1：改写store的导出逻辑 #

不要直接导出Store实例，改成导出工厂函数，只在background中执行创建逻辑：

// store.js
import Vue from "vue";
import Vuex from "vuex";
import "es6-promise/auto";
import createMutationsSharer from "vuex-shared-mutations";
import dummyData from "./dummyData";

Vue.use(Vuex);

export function createStore() {
  return new Vuex.Store({
    state: {
      chromePagesState: {
        allSections: [],
      },
    },
    mutations: {
      setChromePagesState(state, value) {
        state.chromePagesState = value;
      },
      addWhiteListedItem(state, item) {
        state.chromePagesState.allSections[0].itemSectionCategory[0].tasks.splice(0, 0, item);
      },
    },
    actions: {
      async loadChromePagesState({ commit }) {
        const json = await getStorageValue("inventoryData");
        commit(
          "setChromePagesState",
          Object.keys(json).length === 0 && json.constructor === Object
            ? dummyData
            : JSON.parse(JSON.stringify(json))
        );
      },
    },
    plugins: [
      createMutationsSharer({
        predicate: ["addWhiteListedItem", "loadChromePagesState"],
      }),
    ],
  });
}

步骤2：background中全局挂载唯一Store实例 #

// background.js
import { createStore } from "../content/popup/firstpage/store";

// 创建唯一Store实例，挂载到background的全局window上
window.globalStore = createStore();

browser.runtime.onMessage.addListener((message, sender) => {
  if (message.type === "storeinit") {   
    window.globalStore.dispatch("loadChromePagesState");
    return Promise.resolve(window.globalStore.state[message.key]);
  }
});

步骤3：popup和content script直接复用background的Store #

popup脚本调整 #

// popup.js
// 复用background的Store实例
async function getSharedStore() {
  const backgroundPage = await browser.runtime.getBackgroundPage();
  return backgroundPage.globalStore;
}

export async function showPopup() {
  const popupContainer = document.createElement("div");
  document.body.appendChild(popupContainer);
  const store = await getSharedStore();
  new Vue({
    el: popupContainer,
    store,
    render: (h) => h(App),
    created() {
      console.log("Calling store dispatch from popup");
      // 直接调用store方法，不需要额外发消息
      this.$store.dispatch("loadChromePagesState");
    },
  });
}

content script调整 #

// content script的index.js
async function initContent() {
  const overlayContainer = document.createElement('div');
  document.body.appendChild(overlayContainer);
  // 同样获取background的Store实例
  const backgroundPage = await browser.runtime.getBackgroundPage();
  const store = backgroundPage.globalStore;
  new Vue({
    el: overlayContainer,
    store,
    render: (h) => h(Overlay, { props: { isPopUp: false } }),
  });
}
initContent();

• 上述方案适用于Manifest V2版本的Chrome扩展，如果你升级到Manifest V3，background变为Service Worker没有window对象，无法使用getBackgroundPage，可以采用「所有上下文单独创建Store + vuex-shared-mutations同步mutation + chrome.storage做持久化」的方案，同样能保证多环境状态一致。
• 原代码中的loadChromePagesStateBrowser可以完全删除，所有环境共用同一个Store实例后，直接调用action/mutation即可全局生效。

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