从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)
},
},

然而，在使用composition API(@nuxtjs/composition-API(的设置中，当我编写函数时，我无法访问它$复制文本

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

那么，如何使$copyText可以在组合API中使用呢？

Answer 1

我能够通过NuxtuseContext()方法实现这一点：

import { useContext } from '@nuxtjs/composition-api'
export default function () {
const { $copyText } = useContext();
$copyText('code');
}

Answer 2

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

const { $copyText } = useNuxtApp()

https://nuxt.com/docs/bridge/bridge-composition-api#usecontext-和上下文