Fungsi pengiraan berasingan dikongsi oleh kompilasi Vue ke dalam pakej berasingan

Question

Bagaimana hendak berkongsi vue/nuxtkod khusus antara pakej yang berbeza?

Saya tidak mahu menggunakan monorepo, tetapi saya mempunyai beberapa kod kongsi yang ingin saya pisahkan ke dalam pakejnya sendiri. Kod kongsi (pakej baharu) ini ditulis menggunakan @nuxtjs/composition-api, hanya computed dan yang digunakan berulang kali dalam komponen berbeza /templates ;methods.

Saya tidak mahu pakej ini disediakan sebagai pemalam. Sebaliknya, import terus untuk memanfaatkan gegaran pokok (sama seperti composition-api).

Saya biasa menggunakan rollupjs

//Pakej baharu
//index.js
eksport { lalai sebagai isTrue } daripada './src/isTrue'
...

//src/isTrue
import { dikira } daripada '@nuxtjs/composition-api'

eksport lalai (p) =>
  return computed(() => p === 'true') //Saya tidak pasti sama ada ini akan memusnahkan responsif? ! ? !
}

Saya tiada masalah menyusunnya ke .ssr, .esm, .min format melalui rollupjs

Masalah berlaku apabila saya mengimport pakej baharu ke dalam fail yang berfungsi.

import { isTrue } daripada 'new-package'

eksport lalai{
nama: 'testComp',
persediaan(props){
  kembali {
    isActive: isTrue(props.active)
  }
}

akan menghasilkan:

[vue-composition-api] Vue.use(VueCompositionAPI) mesti dipanggil sebelum menggunakan sebarang fungsi. 
Saya faham bahawa @nuxtjs/composition-api ialah pembungkus untuk VueCompositionAPI. 
Saya tidak mahu memasang pakej baharu sebagai pemalam, jadi saya meninggalkan pemasangan pakej baharu (contoh pemasangan: https://github.com/wuruoyun/vue-component-lib-starter/blob /master/src/install .js)
            

Answer 1

Terpakai options API

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

Gunakan rollupjs untuk menyusun library.js dan mengimportnya

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

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