如何从Vue Composition API/Vue 3.0 + TypeScript中的组合函数访问根上下文? [英] How to access root context from a composition function in Vue Composition API / Vue 3.0 + TypeScript?

问题描述

我想创建用 TypeScript 编写的可重用包装函数，以通过使用合成函数来触发吐司通知，如Vue 3.0的当前规范:合成API RFC .

I want to create a reusable wrapper function written in TypeScript for triggering a toast notification by using a composition function, as defined in the current specification for Vue 3.0: Composition API RFC.

此示例使用BootstrapVue v2.0吐司组件.对于Vue 2，将通过this.$bvToast Vue组件实例注入在根上下文中进行调用:

This example is using BootstrapVue v2.0 toast component. With Vue 2, it would be invoked via the this.$bvToast Vue component instance injection in the root context:

this.$bvToast.toast('Error happened', {
  title: 'Oh no',
  variant: 'danger'
});

类似于服务的合成功能看起来像这样:

This service-like composition function would look much like this:

// File: @/util/notify.ts
export function useNotify() {
  const notifyError = (title: string, msg: string) => {
    // How to access context.root as in a function component, without passing it to this function?
    context.root.$bvToast.toast(msg, {
      title,
      variant: 'danger'
    });
  };

  return { notifyError};
}

export default useNotify;

并且将非常像这样使用:

And would be used much like this:

// Use in your functional component:
import { createComponent } from '@vue/composition-api';

import { useNotify} from '@/util/notify';

export default createComponent({
  name: 'MyFailingComponent',
  setup() {
    const { notifyError } = useNotify();

    notifyError('Request error', 'There was an error processing your request, please try again later.');

    return {};
  }
});

推荐答案

好吧，我很快在同一RFC站点上找到了一个合适的示例.但是决定在这里分享我的例子.

Well, I soon found out a proper example on that same RFC site. But decided to share my examples here.

为了清晰起见，我假设RFC站点目前不在TypeScript中包含示例.随着这种新的Vue 3.0组件和组合功能(替代Mixins)的编写方式需要一些习惯.

The RFC site doesn't include examples in TypeScript at the moment, for clarity's sake I presume. As this new way of writing Vue 3.0 components and composition functions (as a replacement to Mixins) takes a bit of getting used to.

答案:在将所需的部分分解为组件代码时，可以将上下文对象直接传递给composition函数.

// File: @/util/notify.ts
// import { SetupContext } from '@vue/composition-api';

export function useNotify({ root }) {
  const notifyError = (title: string, msg: string) => {
    root.$bvToast.toast(msg, {
      title,
      variant: 'danger'
    });
  };

  return { notifyError };
}

export default useNotify;

// Use in your functional component:
import { createComponent, SetupContext } from '@vue/composition-api';

import { useNotify} from '@/util/notify';

export default createComponent({
  name: 'MyFailingComponent',
  setup(props: any, context: SetupContext) {
    const { notifyError } = useNotify(context);

    notifyError('Request error', 'There was an error processing your request, please try again later.');

    return {};
  }
});

在将多个函数参数作为对象传递时，与使用具有复杂对象分解功能的TypeScript类型相同:

// File: @/util/notify.ts
import { SetupContext } from '@vue/composition-api';

export function useNotify({ context, defaultTitle = 'Hey!' }: { context: SetupContext, defaultTitle?: string }) {
  const notifyError = (msg: string, title?: string) => {
    context.root.$bvToast.toast(msg, {
      title: title || defaultTitle,
      variant: 'danger',
    });
  };

  return {
    notifyError,
  };
}

export default useNotify;

// Usage like:
const { notifyError } = useNotify({ context });
// Or
const { notifyError } = useNotify({ context, defaultTitle: 'Hey there' });

语法整洁，Vue社区做得很好！

Neat syntax, well done Vue community!

这篇关于如何从Vue Composition API/Vue 3.0 + TypeScript中的组合函数访问根上下文?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！