发布到npm后Vue3状态重复导入导致状态无法共享的问题

问题 #

我计划将Vue3应用模块化，拆分部分功能为独立npm包。但发布包到npm后，消费端应用会重复导入部分文件，例如导入store文件时会加载多次，导致组件间无法共享状态。

我制作了一个简单示例：

myComponent.vue（导入store，供消费端主应用使用） #

<script setup lang="ts">
import { store } from "./store";
</script>

<template>
  <div class="box">
    <b>This is the State Value:</b><br />
    {{ store.mylibval }}
  </div>
</template>

store.ts（存储状态的简单文件） #

import { reactive } from "vue";

console.log("store imported")

export const store = reactive({
  mylibval: "Hello World",
});

myService.ts（消费端应用可调用的修改状态的服务函数） #

import { store } from "./store";

export function useMyLibFunc() {
  const setVal = (val: string) => {
    store.mylibval = val;
  };

  const getVal = () => {
    return store.mylibval;
  };

  return {
    setVal,
    getVal,
  };
}

App.vue（测试用，库应用和消费端应用使用相同内容，仅调整导入路径） #

<script setup lang="ts">
import MyComponentVue from "mylibrary/src/main/MyComponent.vue"
import { useMyLibFunc } from "mylibrary/src/main/myService";

const myLibService = useMyLibFunc();

const setNewVal = () => {
  myLibService.setVal("Hello Moon");
};
</script>

<template>
  <MyComponentVue />
  <button @click="setNewVal">Set new Val</button>
</template>

在库环境中运行应用一切正常，但发布到npm并在消费端应用安装后，状态无法正常工作，且控制台输出两次"store imported"。

我猜测组件和服务分别导入了store，导致无法共享状态，请问原因是什么，该如何解决？

原因分析 #

核心问题是模块重复加载导致单例状态失效：

1. 发布npm包后，消费端构建工具（如Vite、Webpack）可能因路径解析差异、依赖重复安装，或直接导入库的源码而非构建产物，将store.ts解析为两个独立模块实例，每次导入都会重新执行模块代码，生成新的reactive状态对象，自然无法共享状态。
2. 你在消费端直接导入库的src目录文件，会触发构建工具重新编译库源码，和库本身的构建产物产生冲突，进一步加剧重复加载问题。

解决方法 #

1. 发布构建后的产物而非源码 #

在库的package.json中正确配置入口字段，指向构建后的文件，避免消费端直接导入源码：

{
  "name": "mylibrary",
  "version": "1.0.0",
  "main": "./dist/mylibrary.umd.js",
  "module": "./dist/mylibrary.es.js",
  "types": "./dist/types/index.d.ts",
  "files": [
    "dist"
  ]
}

2. 配置库的构建工具确保单例输出 #

以Vite为例，在vite.config.ts中配置库模式，确保产物为单例：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  build: {
    lib: {
      entry: './src/main.ts', // 库的入口文件
      name: 'MyLibrary',
      fileName: (format) => `mylibrary.${format}.js`
    },
    rollupOptions: {
      external: ['vue'],
      output: {
        globals: {
          vue: 'Vue'
        }
      }
    }
  }
})

3. 清理消费端的重复依赖 #

• 执行npm dedupe命令，清理node_modules中的重复依赖，确保vue和你的库只安装一次。
• 若消费端使用构建工具，可将你的库标记为外部依赖，避免重复打包。

4. 改用Pinia管理状态（可选） #

Pinia是Vue3官方推荐的状态管理方案，天生支持单例模式，能从设计层面避免重复加载问题：

// store.ts
import { defineStore } from 'pinia'

export const useMyLibStore = defineStore('myLibStore', {
  state: () => ({
    mylibval: "Hello World"
  }),
  actions: {
    setVal(val: string) {
      this.mylibval = val
    }
  }
})

后续在组件和服务中调用useMyLibStore()，都会获取到同一个状态实例。

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