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

Question

通常，我使用带有功能的js代码在某些事件上运行。

现在我正在使用nuxt.js，我想知道将文件放在哪里或如何创建全局方法以在每个组件中使用这些功能。 我可以在每个特定组件内编写所需的方法，但在该组件外将无法使用。

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

Answer 1

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

非全局Mixins

为您的mixins创建一个额外的文件夹。例如在/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文档的建议：

  

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