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

Question

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

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

...

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

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

Answer 1

检查以下内容，您必须缺少一项或多项：

1。你的插件应该导出一个方法。该方法应该接收一个 'inject' 函数并使用它来注册您的 '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>