将Vue编译共享的计算函数分离为单独的软件包

Question

如何在不同的包之间共享通用的vue/nuxt特定代码？

我不想使用monorepo，但我有一些共享的代码，我想将其分离成自己的包。这个共享的代码（新包）使用@nuxtjs/composition-api编写，只是在不同的组件/模板中反复使用的共享computed和methods。

我不希望将这个包设置为插件。而是直接导入以利用树摇动（就像composition-api一样）。

我熟悉使用rollupjs创建可导入的模块。

//新包
//index.js
export { default as isTrue } from './src/isTrue'
...

//src/isTrue
import { computed } from '@nuxtjs/composition-api'

export default (p) => {
  return computed(() => p === 'true') //我不确定这样会不会破坏响应性？！？！
}

我没有遇到任何问题将其编译为.ssr, .esm, .min格式，通过rollupjs

问题出现在我将新包导入到一个工作文件中时。

import { isTrue } from 'new-package'

export default{
name: 'testComp',
setup(props){
  return {
    isActive: isTrue(props.active)
  }
}

会产生：

[vue-composition-api] 必须在使用任何函数之前调用 Vue.use(VueCompositionAPI)。

我理解@nuxtjs/composition-api是VueCompositionAPI的包装器。

我不想将新包安装为插件，因此我省略了新包的安装（安装示例：https://github.com/wuruoyun/vue-component-lib-starter/blob/master/src/install.js）

Answer 1

使用了 options API

//library.js
export default function(){ // 访问 this -> 箭头函数没有 this
   return this.disabled == true // 当使用 options api 时，这将是 vue 上下文，即属性 disabled
}

使用 rollupjs 编译 library.js，并可以导入

//component.vue
import { isDisabled } from 'library'

export default {
  //Composition API:
  setup(props){
   return {
    //stuff
   }
  },
  //Options API:
  computed:{
    isDisabled,
  }
}