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

Question

通常我会在要使用该函数的组件中创建函数，但是，我开始需要在 2 个或更多组件中使用某个函数，这意味着现在我必须将其复制并放入其他组件。这显然不是最优的，所以我想知道我应该把这些函数放在哪里。为了向您展示通用实用程序函数的含义，我将在此处添加一个：winrate(wins, losses) {    let games = wins + losses    return Math.round(wins * 100 / games) + '%'}没什么特别的，它只需要输赢，然后返回赢率。我正在使用 Vuex，实际上我可以将它们放在 Vuex 商店中，但是，我不确定这是否是最佳选择，所以这就是我问你们的原因。

Answer 1

将此类函数（称为帮助程序）存储在诸如helpers.jsor 之类的文件中是一种常见的做法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))

    }

  }

  ...

}