我正在尝试使用 @vue/apollo-composable使用我的 Nuxt-Ts 应用程序。这是应该如何将其注入(inject)“普通”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),
})
问题:我不知道如何访问 Nuxt-TS 中的根实例。
我尝试制作一个插件,但它被直接注入(inject)到根实例中(这是不对的,因为 @vue/apollo-composable
正在使用 composition-api::provide()
创建它自己的属性 _提供
。
如果我使用 nuxt 插件的 inject
一个 $
得到连接。如果我通过 ctx.app._provided =
直接写一个 _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 };
},
});
但是在 InstallGraphQl::setup
...
setup
编辑:有关 @vue/apollo-composable
的更多信息,请参见此处的讨论: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 不太熟悉,但我认为代码应该可以正常工作。
关于typescript - 如何使用 nuxt 和 @vue/composition-api 提供/注入(inject) Vue 根实例?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59198021/