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

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