如何使用 Nuxt.js 将自己的 JS 用作插件

Question

我正在使用nuxt.js。我在 plugins 文件夹中有一个 helper.js 脚本，它有一个简单的 Test() 函数。现在如何在 helper.js 文件中的页面内调用 Test() 方法。

helper.js 文件：

export default function Test() {
   return 'This is test'
}

Answer 1

访问整个应用程序的全局方法：

---

1-创建 ./plugins/helpers.js .

---

2-编辑 ./plugins/helpers.js ：

import Vue from 'vue'
Vue.mixin({
    methods:{
        mySpecialMethod(value){
            console.log(value)
        },
    }
})

---

3-编辑 ./nuxt.config.js ：

plugins: [
    ...
    { src: '~/plugins/helpers' },
    ...
],

---

现在您可以通过以下方式访问您的全局方法：

this.mySpecialMethod()

Answer 2

使用注入方法

实际上有一个简单的方法可以通过使用“注入”方法来做到这一点。 As described in the docs...

plugins 目录包含您希望在实例化根 Vue.js 应用程序之前运行的 JavaScript 插件。这是添加 Vue 插件和注入函数或常量的地方。每次需要使用 Vue.use() 时，都应该在 plugins/ 中创建一个文件，并将其路径添加到 nuxt.config.js 中的插件中。

在您的插件中只需像这样使用注入：

export default ({ app }, inject) => {
  inject('myInjectedFunction', (string) => console.log('That was easy!', string))
}

在您的组件中，您可以按如下方式使用它：

export default {
  mounted(){
    this.$myInjectedFunction('works in mounted')
  },
  asyncData(context){
    context.app.$myInjectedFunction('works with context')
  }
}

---

“手动”注入

如果您打算自己注入一些东西，请查看 Adding Instance properties 上的 Vue 文档

您可能希望在许多组件中使用数据/实用程序，但您不想污染全局范围。在这些情况下，您可以通过在原型上定义它们来使它们可用于每个 Vue 实例

Vue.prototype.$appName = 'My App'

并在这些注入的属性前加上'$'...

$ 是 Vue 用于所有实例的属性的约定。这样可以避免与任何定义的数据、计算属性或方法发生冲突。

Answer 3

如果你只是想在你的组件（页面）中使用代码，你只需要导入并使用方法：

TestPage.vue

<template>
  <div>
    <h1>{{ getTest }}</h1>
  </div>
</template>

<script>
import test from '~/plugins/helper.js'

export default {
  computed: {
    getTest () {
      return test()
    }
  }
}
</script> 

Answer 4

您好，您可以将函数全局注入到 Vue 中，执行以下操作：

./plugins/myPluging.js

import Vue from 'vue'

Vue.prototype.$nameOfMyPlugin = (args) => {
 // Code here
}

它们在您的所有组件中，您可以通过这种方式访问​​它：

./components/myComponent.vue

<script>
export default {
  name: 'c',
  mounted () {
   this.$nameOfMyPlugin('something useful')
 }
}

</script>

就是这样 :) 希望这会有所帮助。

-- 参考：https://nuxtjs.org/guide/plugins/#inject-in-root-amp-context

Answer 5

以下是我在一个 nuxt 项目中使用的自定义 js 插件。

1. 在 plugins 文件夹中创建您的文件，并制作您自己的函数，如下所示

export default (context, inject) => {
  const formatDate = (dateTime) => {
    if (typeof(dateTime) === 'undefined' || dateTime === null) {
      return null;
    }
    let tempDate = new Date(dateTime);
    tempDate.setMinutes(tempDate.getMinutes() -
      tempDate.getTimezoneOffset());
    tempDate = tempDate.toISOString().slice(0, 16);
    return tempDate;
  }
  // Inject $hello(msg) in Vue, context and store.
  inject('formatDate', formatDate)
  // For Nuxt <= 2.12, also add ?
  context.$formatDate = formatDate
}

1. 将插件添加到 nuxt.config.js 中，您将能够在全局范围内使用它。