![](/img/trans.png)
[英]Nuxt with composition api - access to root instance in composition function
[英]Access Nuxt custom plugin from Composition API
我在我的 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 并且在没有组合 API 的 nuxt 中我可以做类似的事情
methods: {
async onCopyCodeToClipboard() {
const code = 'code'
await this.$copyText(code)
},
},
但是在使用组合 API (@nuxtjs/composition-api) 的设置中,当我编写 function 时,我无权访问 this.$copyText
const onCopyCodeToClipboard = async () => {
const code = context.slots.default()[0].elm.outerHTML
// -> Can't use this here - await this.$copyText(code)
}
那么如何使$copyText
在组合 API 中可用?
我能够通过 Nuxt useContext()
方法让它工作:
import { useContext } from '@nuxtjs/composition-api'
export default function () {
const { $copyText } = useContext();
$copyText('code');
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.