Размещение в 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