呼び出しているコンポーネントを使用するnpmパッケージがありますinject
:
<template>
<div>{{ hub.message }}</div>
</template>
<script>
import { inject } from "@vue/composition-api";
export default {
name: "test",
setup() {
const hub = inject("HUB");
return { hub };
},
};
</script>
lib package.json で@vue/composition-api
、開発者とピアの依存関係として設定しました。
私のメイン プロジェクト (ライブラリではない) では、Composition API を登録し、次のように提供を使用しています。
import Vue from "vue";
import VueCompositionApi from "@vue/composition-api";
Vue.use(VueCompositionApi);
import App from "./App.vue";
import { hub } from "../lib/hub";
import { provide } from "@vue/composition-api";
Vue.config.productionTip = false;
new Vue({
setup() {
provide("HUB", hub);
},
render: h => h(App)
}).$mount("#app");
ハブは単純なオブジェクトです:
export const hub = {
message: null,
init: function() {
this.message = "I'm here";
},
};
しかし、私は得ています
Error in data(): "Error: [vue-composition-api] "inject" get called outside of "setup()""
この問題を示す小さなデモも用意しました: https://github.com/JiProchazka/composition-api-test
何か案は?
ありがとう