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

Posted 2023-02-16

【中文标题】vue 将共享计算函数编译到单独的包中

【英文标题】：vue compile shared computed functions into separate package

【发布时间】：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 将其编译成.s-s-r, .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

【参考方案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,