nuxt 插件文件夹中的 Javascript - 如何在组件中使用？

Posted 2023-03-25

【中文标题】nuxt 插件文件夹中的 Javascript - 如何在组件中使用？

【英文标题】：Javascript in nuxt plugins folder - how to use in component?

【发布时间】：2021-03-11 22:52:40

【问题描述】：

我的 Nuxt 插件文件夹中有一个 javascript 变量 (var testButton)。然后我将该文件添加到我的 nuxt.config.js 插件中。在我的组件中，我有一个 Buefy 按钮，我正在尝试调用脚本：

<b-button @click="testButton">Click Me</b-button>

...

<script>
export default 
  mounted () 
  this.$testButton()
  

</script> 

我在我的脚本部分导入脚本，并尝试了计算和安装的生命周期。不知道我做错了什么。谢谢

【参考方案1】：

检查以下几点，你一定少了一项或多项：

1。你的插件应该导出一个方法。该方法应该接收一个“注入”函数并使用它来注册您的“testButton”函数。

所以，在你的 ~/plugins/testButton.js 中

export default (context, inject) => 
    inject('testButton', () => 
        console.log('testButton works!')
    )

2。你应该在 nuxt.conf.js 文件中正确注册你的插件

这样做：

plugins: [
     src: '~/plugins/testButton.js' ,
],

3。将其称为“$testButton()”（注意 Nuxt 将在您的方法名称中添加一个美元符号）。

您的“$testButton”方法现在可以在您的 nuxt 应用程序的任何位置使用。您不必导入它或创建任何计算属性。

<b-button @click="$testButton">Click Me</b-button>

<script>
export default 

</script>