组合api使用这个

Posted 2023-02-22

【中文标题】组合api使用这个

【英文标题】：Composition api use this

【发布时间】：2021-04-10 14:51:27

【问题描述】：

我正在使用带有 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() 函数中不起作用。

【参考方案1】：

@meforma/vue-toaster installs $toast on the application context，可以从setup()中的getCurrentInstance().ctx访问：

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

<script>
import  getCurrentInstance  from 'vue'

export default 
  setup() 
    const $toast = getCurrentInstance().ctx.$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>

【讨论】：

@yetanothercoder 更新了解释的答案。 @meforma/vue-toaster 在上下文中安装$toast，可以从setup() 访问。

【参考方案2】：

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