Размещение в vue.js функций, которые принимают параметры и не работают с переменными в компоненте

Я пытаюсь разобраться в лучших практиках vue.js (+ pinia в качестве хранилища). Я пришел из использования шаблонов Django, где можно использовать шаблонные функции для переменных, чтобы массировать данные для отображения. Однако я не уверен, куда поместить такие функции в vue.js.

Предположим, что у меня есть переменная, содержащая строку, и я хочу отрезать цифры в конце строки. Переменная поступает из цикла vue.js for-loop над переменной list, присутствующей в магазине. Я бы создал некоторую функцию, чтобы сделать это:

displayString(s) {
  const re = /\d+$/;
  return s.replace(re, "");
}

Я бы использовал его в шаблоне каким-либо образом:

<th v-for="(item, index) in store.myList" :key="index">
  {{ displayString(item) }}
</th>

На мой взгляд, ни одно из мест для размещения функции (methods/computed или actions/getters в pinia) не будет правильным, поскольку все они предназначены для использования данных из магазина или компонента (и не все они принимают параметры в любом случае).

Концептуально, где может быть функция, которая не возвращает данные из компонента или хранилища, а принимает параметр и возвращает его измененную версию? Или я должен разработать все по-другому, написав функции getters/computed, которые каким-то образом изменяют список для отображения данных?

Я предполагаю, что есть (хакерские?) способы достичь того, что я хочу (например, getters/computed вернуть функцию, которой я могу передать параметр), но я хочу знать лучший способ справиться с этим в целом.

В Vue 2 этот вид вспомогательной функции известен как фильтр, и его можно использовать следующим образом:

{{ item | displayString }}

Фильтры были удалены в Vue 3, теперь функции должны использоваться непосредственно в шаблоне, как:

{{ displayString(item) }}

Эта функция является форматором общего назначения, который не специфичен для магазина и не использует его состояние, поэтому она не принадлежит Pinia. Вместо этого, displayString может быть импортирована в компонент, где это необходимо. Или быть зарегистрированной глобально:

app.config.globalProperties.displayString = displayString
Вернуться на верх