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

问题描述

我正在尝试使用 @ vue/apollo-composable 与我的Nuxt-Ts应用程序配合使用.这是示例应如何将其注入正常"节点的根实例中. Vue应用程序:

I'm trying to use @vue/apollo-composable with my Nuxt-Ts application. This is the example how it should be injected into root instance on a "normal" Vue application:

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

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

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

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

Problem: I don't know how to get access to the root instance in Nuxt-TS.

我尝试制作一个插件，但是它直接注入了根实例中(这是不对的，因为@vue/apollo-composable使用的是 composition-api::provide() ，它会创建自己的属性_provided.

I tried making a plugin, but it's injected either directly into the root instance (which is not right, because @vue/apollo-composable is using composition-api::provide() which creates it's own property _provided.

如果我使用nuxt插件的inject，则将$连接起来.而且，如果我通过ctx.app._provided =直接写入_provided对象，它不会粘住.

And if I use nuxt plugin's inject a $ get's concatenated. And if I write a _provided object directly in via ctx.app._provided = it doesn't stick.

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函数中使用.

I can't call provide() like in the original example, because it's only allowed inside a VueComponent::setup function.

我还尝试创建一个组件，并仅在需要它的页面上使用它(虽然有点违反了在根实例中安装的目的)

I also tried creating a Component and just use it on the page I need it (kind of defeats the purpose of installing in root instance though)

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 };
  },
});

，但是随后在InstallGraphQl::setup ...

but then setup of the exported components gets called before InstallGraphQl::setup...

有关@vue/apollo-composable的更多信息，请参见此处的讨论: https://github.com/vuejs/vue-apollo/issues/687

Also for more information about @vue/apollo-composable see discussion here: 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不太熟悉，但是我认为代码应该可以正常工作.

Not much familiar with nuxt-ts though, but I think the code should just work.

这篇关于如何使用nuxt和@ vue/composition-api提供/注入Vue根实例?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！