vue.js 从Composition API访问Nuxt自定义插件

5n0oy7gb 于 2023-03-03 发布在 Vue.js

关注(0)|答案(2)|浏览(154)

我在我的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）的设置中，当我编写函数时，我无法访问此.$copyText

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

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

vue.js

来源：https://stackoverflow.com/questions/67807245/access-nuxt-custom-plugin-from-composition-api

2条答案

按热度按时间

vxbzzdmp1#

我可以通过Nuxt useContext()方法使其工作：

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

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

  $copyText('code');
}

赞(0）回复(0）举报 2023-03-03

ikfrs5lh2#

如果您使用的是nuxt桥，则应直接从useNuxtApp（）导入useContext，如下所示：

const { $copyText } = useNuxtApp()

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

赞(0）回复(0）举报 2023-03-03

我来回答

vue.js 从Composition API访问Nuxt自定义插件

2条答案

相关问题

热门标签

最新问答