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

Posted 2023-03-25

【中文标题】如何使用 Nuxt.js 将自己的 JS 用作插件

【英文标题】：How to use own JS as a plugin using Nuxt.js

【发布时间】：2018-03-30 01:10:28

【问题描述】：

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

helper.js 文件：

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

【参考方案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()

【参考方案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 用于所有实例的属性的约定。这样可以避免与任何定义的数据、计算属性或方法发生冲突。

【参考方案3】：

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

TestPage.vue

<template>
  <div>
    <h1> getTest </h1>
  </div>
</template>

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

export default 
  computed: 
    getTest () 
      return test()
    
  

</script> 

【讨论】：

如何全局导入而不是导入到每个页面中。

【参考方案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

【参考方案5】：

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

在 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

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