如何使用 nuxt 和 @vue/composition-api 提供/注入 Vue 根实例？

我正在尝试使用@vue/apollo-可组合 https://v4.apollo.vuejs.org/guide-composable/setup.html#_1-install-vue-apollo-composable与我的 Nuxt-Ts 应用程序。这是如何将其注入“普通”Vue 应用程序上的根实例的示例：

import { provide } from '@vue/composition-api'
import { DefaultApolloClient } from '@vue/apollo-composable'

const app = new Vue({
  setup () {
    provide(DefaultApolloClient, apolloClient)
  },

  render: h => h(App),
})

Problem:我不知道如何访问根实例在 Nuxt-TS 中.

我尝试制作一个插件，但它要么直接注入到根实例中（这是不对的，因为@vue/apollo-composable正在使用composition-api::provide() https://vue-composition-api-rfc.netlify.com/#plugin-development它创造了自己的财产_provided.

如果我使用 nuxt 插件inject a $得到连接。如果我写一个_provided对象直接在via中ctx.app._provided =它不粘。

import { DefaultApolloClient } from "@vue/apollo-composable";
const myPlugin: Plugin = (context, inject) => {
  const defaultClient = ctx.app.apolloProvider.defaultClient;
  inject(DefaultApolloClient.toString(), defaultClient) // results in $$ and also composition-api::inject is checking inside `_provided[DefaultApolloClient]`
}

export default myPlugin

我无法打电话provide()就像原来的例子一样，因为它只允许在VueComponent::setup功能。

我还尝试创建一个组件，然后在我需要它的页面上使用它（虽然有点违背了在根实例中安装的目的）

const InstallGraphQl = createComponent({
  name: "InstallGraphQl",
  setup(_props, ctx: any) {
    debugger;
    const apolloClient = ctx.app.apolloProvider.defaultClient;
    ctx.provide(DefaultApolloClient, apolloClient);
  },
});
export default createComponent({
  name: "DefaultLayout",
  components: {
    InstallGraphQl
  },
  setup(_props, _ctx: SetupContext) {
    const { result } = useQuery(SharedLayoutQuery);
    return { result };
  },
});

但是之后setup导出的组件的数量之前被调用过InstallGraphQl::setup...

编辑：还可以了解更多信息@vue/apollo-composable请参阅此处的讨论：https://github.com/vuejs/vue-apollo/issues/687 https://github.com/vuejs/vue-apollo/issues/687

只需设置一个setup()到根选项：

/* plugins/provide-apollo-client.js */

import {provide} from '@vue/composition-api'
import {DefaultApolloClient} from '@vue/apollo-composable'

export default function ({app}) {
  app.setup = () => {
    provide(DefaultApolloClient, ...)
  }

  // Or, use local mixin
  app.mixins = (app.mixins || []).concat({
    setup () {...},
  })
}

/* nuxt.config.js */

export default {
  plugins: ['~/plugins/provide-apollo-client'],
}

虽然对 nuxt-ts 不太熟悉，但我认为代码应该可以工作。