我应该将多个 Vue.js 组件使用的通用实用函数放在哪里？

Question

通常我在要使用该函数的组件中创建该函数，但是，我开始需要在两个或更多组件中使用某个函数，这意味着现在我必须将其复制并放置在其他组件。这显然不是最佳的，所以我想知道应该将这些函数放在哪里。为了向您展示通用实用函数的含义，我将在此处添加一个：

winrate(wins, losses) {
    let games = wins + losses
    return Math.round(wins * 100 / games) + '%'
}

没什么特别的，只是取胜负，然后返回胜率。

我正在使用 Vuex，实际上我可以将它们放在 Vuex 商店中，但是，我不确定这是否是最好的选择，所以这就是我问你们的原因。

Answer 1

通常的做法是将此类函数（称为助手）存储在诸如helpers.js或 之类的文件中utils.js，其代码可能如下所示：

export function winrate(wins, losses) {
    let games = wins + losses
    return Math.round(wins * 100 / games) + '%'
}

然后只需在组件中导入该助手即可：

import { winrate } from './path/to/helpers.js'

export default {
  // ...
  methods: {
    method() {
      console.log(winrate(1, 2))
    }
  }
  // ...
}