vue 将共享计算函数编译到单独的包中答案

【问题标题】：vue compile shared computed functions into separate packagevue 将共享计算函数编译到单独的包中
【发布时间】：2021-09-12 20:53:47
【问题描述】：

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

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

我不希望将软件包设置为插件。取而代之的是直接导入的东西来利用摇树（就像composition-api）。

我熟悉rollupjs 来创建可导入模块。

//New package
//index.js
export { default as isTrue } from './src/isTrue'
...

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

export default (p) => {
  return computed(() => p === 'true') //Im not 100% is this will break reactivity?!?!
}

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

我遇到的问题是当我将新包导入工作文件时。

import { isTrue } from 'new-package'

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

将产生：

[vue-composition-api] must call Vue.use(VueCompositionAPI) before using any function.

我知道@nuxtjs/composition-api 是 VueCompositionAPI 的包装器。

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

【问题讨论】：

不使用composition-api，我可以使用computed:{} 下的options api 并在新包中删除composition-api

标签： vue.js webpack vuejs2 nuxt.js

【解决方案1】：

使用options API

//library.js
export default function(){ // access to this -> arrow function doesnt have this
   return this.disabled == true // when applied using the options api this will be the vue context aka property disabled
}

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

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

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

【讨论】：