VueJS Интерполяция в строке, получаемой из стэйта

В стэйте (vuex) есть объект с переводом строк:

langFile: {
   user: 'Пользователь',
   level: 'Уровень ${level}'
}

В компоненте в computed функции получаю его геттером:

this.getLangFile.level

Как заставить, чтобы переменная подставлялась в получаемую строку?


Ответы (2 шт):

Автор решения: Vasiliy Rusin

Общий ответ

Vuex это не средство для переводов. Используйте Vue I18n.

Ответ на Ваш вопрос проще некуда - Вы используете неподходящий инструмент для неподходящей задачи.

Ответ конерктно для Вашего случая

Храните только неизменяему часть строки level: 'Уровень ', конкотенируйте в компоненте.

→ Ссылка
Автор решения: Жека Диулин

Я полностью согласен с @Vasiliy Rusin, но вот ответ велосипедиста, так, на всякий пожарный.

В i18next есть прекрасная функция $t(key, options), которая первым аргументом принимает ключ лексемы, а вторым передаёт дополнительные опции: контекст, число, прочие переменные.

Так вот, вам нужно сделать подобие функции $t('Уровень ${level}', { level: 1 }), которая примет объект со свойством level. Дальше строку придётся парсить:

  • искать первое вхождение "${"
  • искать после "}"
  • извлекать часть строки между ${ }
  • извлечённую часть использовать как имя свойства объекта и извлекать параметр.
  • полученное значение подставлять в результирующую строку.

Но если париться Вам не охота - ответ Василия Русина то, что нужно!

→ Ссылка