Где и как хранить функции общего назначения?

Question

[kruu]

Мне нужно сохранить функцию для переиспользования на любой из множества страниц в проекте, например:

numberWithComma(x) {
   return x.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ", ");
}

Затем использовать её в шаблоне:

<p>{{ numberWithComma(5000) }}</p>

Подходит ли для этого VUEX( если честно, я его очень как-то слабо понял на первый взгляд, и я не уверен, что он сюда подходит, так как не работает ни с какими глобальными переменными), если да, то как бы эта функция выглядела в Store.js? Либо для этого нужно создать обычный js файл и экспортировать/импортировать его. Если да, то как бы выглядело оформление?

Comments

[VolgaVolga]

Да просто сервис создайте. Хранилище состояния, конечно, совсем не для этого.

[Сергей Соколов]

В частном случае примера, можно оформить как глобальный фильтр. Но это только во 2-м Vue, в 3-м от фильтров отказались. Советуют использовать computed вычисляемые свойства или методы. Такой подход годится и для 2-го Vue.

Answer 1

[Pike Pikovskyy]

Да, используйте простые .js файлы и подключайте импортами

Структура

projectFolder
  ...
  src
    components
      Component.vue
    utils
      numberWithComma.js

Component.vue

<template>
  <span>{{ valueChanged }}</span>
</template>

<script>
import numberWithComma from '../utils/numberWithComma.js';
// или настройте алиасы, тогда путь к утилитам может выглядеть так: '@/numberWithComma.js'

export default {
  data: ({
    value: 0.123456789  
  }),
  computed: {
    valueChanged() {
      return numberWithComma(this.value);
    }
  }
};
</script>

numberWithComma.js

const numberWithComma = (x) => x.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ", ");

export default numberWithComma;

Answer 2

[Андрей]

Достаточно вынести в какой нибудь файл, /utils/numberUtils

Импортировать в нужные компоненты и оборачивать в computed. С этой задачей может помочь использование миксинов, но я (как и команда вуе) настоятельно не рекомендую этого делать.

Answer 3

[Алексей]

Используйте composition API vue 2.
И создавайте функции которые можете испортировать в компонент

Comments

[Farkl]

зачем использовать vue2?