vue/nuxt在哪里导入文件js

Question

通常我使用带有函数的 js 代码来运行某些事件。

现在我正在使用 nuxt.js，我想知道将这个文件放在哪里，或者如何创建一个全局方法来在每个组件中使用这些函数。 我可以在每个特定组件中编写我需要的方法，但在它之外无法使用。

如何在 vue/nuxt 中做到这一点？

Answer 1

所以在 vue.js 中做到这一点的一种方法是使用 mixins，在 nuxt 中你也可以使用 mixins，然后你应该将它们注册为插件，但首先：

非全局混入

为你的 mixin 创建一个额外的文件夹。例如在 /mixins/myMixin.js

export default {
  methods: {
    commonMethod() {
      console.log('Hello')
    }
  }
}

然后导入布局、页面或组件，并通过 mixins 对象添加：

<script>
  import myMixin from '~/mixins/myMixin.js'   

  export default {
    mixins: [myMixin] 
  }
</script>

全局混入

例如在新文件 plugins/mixinCommon.js 中：

import Vue from 'vue'

Vue.mixin({
  methods: {
    commonMethod() {}
  }
})

将文件包含在nuxt.config.js 中，如下所示： plugins: ['~/plugins/mixinCommon']

之后，您将在任何地方都可以使用该方法，并使用 this.commonMethod() 在那里调用它。但这里有一个来自 vue.js 文档的建议：

谨慎使用全局混合，因为它会影响每个 创建的单个 Vue 实例，包括第三方组件。多数情况 在这种情况下，您应该只将它用于自定义选项处理，例如 在上面的例子中演示过。运送它们也是一个好主意 作为插件避免重复应用。