开发者问题收集

Composition API 使用这个

2021-01-04
2764

我正在使用带有 Composition API 的 Vue 3,并且我想使用第三方包(例如 @meforma/vue-toaster ),并且应该像这样使用(在 Options API 中):

import Toaster from '@meforma/vue-toaster';

createApp(App).use(Toaster).mount('#app')

然后在组件中:

this.$toast.show(`Hey! I'm here`);
this.$toast.success(`Hey! I'm here`);
this.$toast.error(`Hey! I'm here`);
this.$toast.warning(`Hey! I'm here`);
this.$toast.info(`Hey! I'm here`);

但是 this 在 Composition API 的 setup() 函数中不起作用。

3个回答

@meforma/vue-toaster 在应用程序上下文中安装 $toast ,可通过 setup() 中的 getCurrentInstance().appContext.globalProperties 访问:

<template>
  <button @click="showToast">Show toast</button>
</template>

<script>
import { getCurrentInstance } from 'vue'

export default {
  setup() {
    const $toast = getCurrentInstance().appContext.globalProperties.$toast
    return {
      showToast() {
        $toast.show(`Hey! I'm here`)
        $toast.success(`Hey! I'm here`)
        $toast.error(`Hey! I'm here`)
        $toast.warning(`Hey! I'm here`)
        $toast.info(`Hey! I'm here`)
        setTimeout($toast.clear, 3000)
      }
    }
  }
}
</script>

更新: getCurrentInstance() 内部 API ,因此可随时将其移除。请谨慎使用。

tony19
2021-01-05

我遇到了同样的问题。 所以我找到了一种简单的方法: 顺便说一下,我正在使用 Vite。 我的 main.js

import { createApp } from 'vue'
import App from './App.vue'
import Toaster from '@meforma/vue-toaster';

let app = createApp(App)

app.use(Toaster, {
    position: 'top-right'
}).provide('toast', app.config.globalProperties.$toast)
app.mount('#app')

我的组件:

import { inject } from 'vue'
export default {
    name: 'table-line',
    
    setup(props) {
        const toast = inject('toast');
        toast.success(`it works !`)
        return {toast}
    }
}

希望它能有所帮助

user3190147
2022-01-19

setup 函数在组件创建前运行一次。它缺少 this 上下文,而且可能不是您想要放置它们的位置。您可以尝试将其放入可以通过按钮调用的方法中。

Daniel
2021-01-04