將Vue編譯共享的計算函數分離為單獨的軟體包

Question

如何在不同的套件之間共用通用的vue/nuxt特定程式碼？

我不想使用monorepo，但我有一些共享的程式碼，我想將其分離成自己的套件。這個共享的程式碼（新套件）使用@nuxtjs/composition-api編寫，只是在不同的元件/範本中重複使用的共享computed和 ;methods。

我不希望將這個包設定為插件。而是直接導入以利用樹搖晃（就像composition-api一樣）。

我熟悉使用rollupjs建立可匯入的模組。

//新包
//index.js
export { default as isTrue } 從 './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,
  }
}