Vue.js 在vue/nuxt中导入文件js的位置

通常我使用js代码和函数来运行一些事件

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

---

如何在vue/nuxt中实现这一点？

因此在vue.js中实现这一点的一种方法是使用mixin，在nuxt中您也可以使用mixin，然后您应该将它们注册为插件，但首先：

非全局混合

为你的混音创建一个额外的文件夹。例如，在a/mixins/myMixin.js中

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

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

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

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

在

numxt.config.js

中包含该文件，如下所示：

plugins:['~/plugins/mixinCommon']

在此之后，您将使该方法随处可用，并使用此.commonMethod（）在那里调用它。但是这里有一个来自vue.js文档的建议：

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

---

现在很酷，它正在工作，但是如果我有一些以前在document ready

$（document）上工作的函数。ready

（例如插件的初始化）我应该如何调用它？在将它注册为插件后，你可以用这个调用它。myMethod（）如果你注册了非全局mixin，你需要添加

mixin:[myMixin]

在导出默认值中。对于插件，您需要使用插件目录并使用

Vue.use（插件）

。另一个疑问是，我认为不是每次都调用每个组件中的所有mixin的最佳方法吗？不是只调用我们在特定组件中需要的方法的函数更好吗？你认为呢？1）我反对全局mixin，因为你很可能在2-3-4个位置使用它们，但在40-50个位置加载它们。2）是的，最好使用导入{commonMethod}从“mixin”而不是整个，但我不确定导出commonMethod是一个返回方法的对象，还是仅仅是一个函数表达式。无论如何，如果你可以使用

mixins/blog.js

mixins/products.js

mixins/general.js

你将不会共享大量的共享功能，而不需要更改某些页面的逻辑，这样您就可以不用导入特定的函数了。

import Vue from 'vue'

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