如何在Vue3组件NPM包中正确提供Composables？

一、优先推荐：按需导出组合式函数 #

组合式函数本质是纯函数，不需要像组件那样通过Vue实例注册，直接导出让用户按需导入是最符合Vue3组合式API理念的方式，还能配合tree-shaking减少打包体积。

实现步骤：

1. 在项目中单独维护composables目录，每个组合式函数对应一个文件：

// src/composables/useCounter.js
import { ref } from 'vue'

export function useCounter(initialValue = 0) {
  const count = ref(initialValue)
  const increment = () => count.value++
  const decrement = () => count.value--
  return { count, increment, decrement }
}

2. 在composables目录下创建index.js统一导出所有组合式函数：

// src/composables/index.js
export { useCounter } from './useCounter'
// 后续新增的组合式函数都在这里统一导出

3. 在NPM包的入口文件（比如src/index.js）中导出组合式函数：

import components from "./components/components";
import * as composables from './composables'

const plugin = {
  install (app) { // Vue3中install的参数是app实例，而非Vue构造函数，注意修正你原有的组件注册代码
    // 注册组件逻辑保持不变
    for (const prop in components) {
      if (components.hasOwnProperty(prop)) {
        const component = components[prop]
        app.component(component.name, component)
      }
    }
  }
}

// 同时导出插件和组合式函数
export { plugin as default, composables }
// 也可以单独导出每个组合式函数，方便用户直接导入
export { useCounter } from './composables'

用户使用时，直接按需导入即可：

import { useCounter } from 'your-npm-package'

export default {
  setup() {
    const { count, increment } = useCounter()
    return { count, increment }
  }
}

二、可选方案：通过插件挂载全局（不推荐） #

如果你的用户有全局使用组合式函数的需求，可以在插件的install方法中将组合式函数挂载到全局，有两种实现方式：

方式1：挂载到app.config.globalProperties

import components from "./components/components";
import * as composables from './composables'

const plugin = {
  install (app) {
    // 注册组件
    for (const prop in components) {
      if (components.hasOwnProperty(prop)) {
        const component = components[prop]
        app.component(component.name, component)
      }
    }

    // 将组合式函数挂载到全局属性
    app.config.globalProperties.$composables = composables
  }
}

用户在组件中使用时，需要通过getCurrentInstance获取全局属性：

import { getCurrentInstance } from 'vue'

export default {
  setup() {
    const instance = getCurrentInstance()
    const { useCounter } = instance.appContext.config.globalProperties.$composables
    const { count, increment } = useCounter()
    return { count, increment }
  }
}

方式2：通过provide提供全局可注入的组合式函数集合

import components from "./components/components";
import * as composables from './composables'

const plugin = {
  install (app) {
    // 注册组件
    for (const prop in components) {
      if (components.hasOwnProperty(prop)) {
        const component = components[prop]
        app.component(component.name, component)
      }
    }

    // 通过provide提供，组件中用inject获取
    app.provide('globalComposables', composables)
  }
}

用户在组件中使用时，通过inject获取：

import { inject } from 'vue'

export default {
  setup() {
    const globalComposables = inject('globalComposables')
    const { useCounter } = globalComposables
    const { count, increment } = useCounter()
    return { count, increment }
  }
}

注意事项 #

• Vue3的插件install方法参数是app实例（而非Vue构造函数），你原有的组件注册代码需要将Vue.component改为app.component，否则在Vue3环境下会报错。
• 全局挂载的方式不利于tree-shaking，会导致用户打包时引入未使用的组合式函数，因此优先推荐按需导出的方式。

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