从 Composition API 访问 Nuxt 自定义插件

Question

我在我的 nuxt 项目中使用 VueClipboard。

https://www.npmjs.com/package/vue-clipboard2

我有一个插件文件 vue-clipboard.js

import Vue from "vue";
import VueClipboard from 'vue-clipboard2';
Vue.use(VueClipboard);

导入nuxt.config

plugins: ['@/plugins/vue-clipboard'],

这设置了一个全局变量 $copyText 并且在 nuxt 没有组合 API 我可以做类似的事情

methods: {
  async onCopyCodeToClipboard() {
    const code = 'code'
    await this.$copyText(code)
  },
},

但是在使用组合 API (@nuxtjs/composition-api) 的设置中，当我编写一个函数时，我无法访问 this.$copyText

const onCopyCodeToClipboard = async () => {
  const code = context.slots.default()[0].elm.outerHTML
  // -> Can't use this here - await this.$copyText(code)
}

那么如何让

$copyText

可以在组合 API 中使用？

Answer 1

我能够通过 Nuxt

useContext()

方法让它工作：

import { useContext } from '@nuxtjs/composition-api'

export default function () {
  const { $copyText } = useContext();

  $copyText('code');
}

Answer 2

如果你使用的是 nuxt bridge，你应该直接从 useNuxtApp() 导入 useContext，比如：

 const { $copyText } = useNuxtApp()

https://nuxt.com/docs/bridge/bridge-composition-api#usecontext-and-withcontext