Vue Js - 在单个 vue 组件中的多个 js 文件中拆分 methods.js答案

【问题标题】：Vue Js - split methods.js in multiple js files in a single vue componentVue Js - 在单个 vue 组件中的多个 js 文件中拆分 methods.js
【发布时间】：2019-11-08 16:43:42
【问题描述】：

我想将我的 methods.js 拆分为多个文件并将它们导入到我的单个 vue 组件中，如下所示：

import script1 from './script1.js'
import script2 from './script2.js'
import script3 from './script3.js'

export default {
  data: {}
  methods: [script1, script2, script3],
  ...
}

但它不起作用。

有没有办法在不使用 Mixins 的情况下实现这一点？

【问题讨论】：

怎么不起作用？

标签： javascript vue.js

【解决方案1】：

以下应该有效：

import script1 from './script1.js'
import script2 from './script2.js'
import script3 from './script3.js'

export default {
  methods: { script1, script2, script3 }
}

注意[] 已更改为{}。

这假设您的脚本文件使用函数的默认导出。

不过……

methods: { script1, script2, script3 } 是 ES6 的简写：

methods: {
  script1: script1,
  script2: script2,
  script3: script3
}

所以你最终会得到 3 个方法，称为 script1、script2 和 script3。

这里的命名问题很容易解决，您只需要在导入时使用适当的名称即可。比如：

import getUserStatus from './script1.js'

export default {
  methods: {
    getUserStatus
  }
}

这样做，在script1.js 中调用什么函数并不重要，在导入时选择名称。

要在script1.js 中使用默认导出，应该是这样的：

export default function (/* function args here */) {
  // ...
}

这会创建一个匿名函数。如果你愿意，你可以选择给它一个名字。

这种方法有两个潜在的问题：

每个文件只能导入一个函数。
在导入函数时选择名称。如果其他代码需要特定名称，这可能会导致重复和可能的错误。

解决这些问题的一个方法是使用命名导出而不是默认导出。所以在script1.js 中它可能看起来像：

export function getUserStatus (/* function args here */) {
  // ...
}

export function getUserGroup (/* function args here */) {
  // ...
}

然后您可以使用以下方法导入这些：

import { getUserStatus, getUserGroup } from './script1.js'

export default {
  methods: {
    getUserStatus,
    getUserGroup
  }
}

如果您希望导入器挑选要包含的功能，这可以正常工作。但是，如果每个文件导出的多个函数都需要使用正确的名称一起包含，您可以这样做：

export default {
  getUserStatus (/* function args here */) {
    // ...
  },

  getUserGroup (/* function args here */) {
    // ...
  }
}

这再次使用默认导出，但这次我们导出一个包含两个函数作为属性的对象。然后我们可以在我们的组件中使用它：

import script1 from './script1.js'

export default {
  methods: {
    ...script1
  }
}

这里使用扩展运算符将script1 的属性复制到methods 配置对象。方法的名称将与导出对象中的属性名称相匹配。在这种情况下，用于保存导入对象的标识符script1 对方法名称没有任何影响。

但是，如果您发现自己在这种情况下，尝试导入多个相互关联的方法，您可能会发现使用 mixin 会更好，因为看起来您可能需要的不仅仅是方法。

export不同形式的参考：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export

【讨论】：

【解决方案2】：

你很接近，你需要从每个文件中导入方法，而不是整个文件；

import { script1 } from './script1.js'
import { script2 } from './script2.js'
import { script3 } from './script3.js'

export default {
  data: {}
  methods: { script1, script2, script3 },
  ...
}

例如，在script1.js中：

export const script1 = function(x) {
   console.log(x);
};

【讨论】：