Плюрализация переводов

Vue.js — это прогрессивный JavaScript-фреймворк для построения пользовательских интерфейсов. Его ключевая особенность — реактивность данных и компонентная архитектура. В отличие от традиционных подходов, Vue использует виртуальный DOM, который обеспечивает эффективное обновление интерфейса при изменении состояния приложения.

Реактивность и привязка данных Vue реализует реактивность через объект reactive и функцию ref. Любые изменения в реактивных данных автоматически отражаются в DOM. Привязка данных осуществляется с помощью директив, таких как v-bind для атрибутов и v-model для двусторонней привязки:

<template>
  <input v-model="message" />
  <p>{{ message }}</p>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const message = ref('Привет, Vue!');
    return { message };
  }
};
</script>

Компонентная структура Vue строится вокруг компонентов — независимых блоков интерфейса, которые можно многократно использовать. Каждый компонент содержит шаблон, логику и стили:

<template>
  <button @click="increment">{{ count }}</button>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const increment = () => count.value++;
    return { count, increment };
  }
};
</script>

Компоненты могут быть родительскими и дочерними. Передача данных между ними осуществляется через props и события с помощью emit.

Плюрализация и локализация

В больших приложениях часто возникает необходимость поддержки нескольких языков. Vue совместим с библиотекой Vue I18n, которая обеспечивает перевод текста и управление локалями. Плюрализация — это особая часть локализации, позволяющая правильно отображать слова в зависимости от числового контекста.

Настройка Vue I18n Для начала необходимо создать объект переводов и подключить его к приложению:

import { createApp } from 'vue';
import { createI18n } from 'vue-i18n';
import App from './App.vue';

const messages = {
  ru: {
    cart: 'У вас {count} товар | У вас {count} товара | У вас {count} товаров'
  },
  en: {
    cart: 'You have {count} item | You have {count} items'
  }
};

const i18n = createI18n({
  locale: 'ru',
  messages
});

createApp(App).use(i18n).mount('#app');

Использование плюрализации в шаблонах Vue I18n позволяет автоматически выбирать правильную форму слова через функцию $tc:

<template>
  <p>{{ $tc('cart', itemCount, { count: itemCount }) }}</p>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const itemCount = ref(5);
    return { itemCount };
  }
};
</script>

В этом примере функция $tc принимает ключ перевода, число для определения формы слова и объект с параметрами. Для русского языка определяются три формы: 1, 2–4 и 5 и более.

Особенности плюрализации для разных языков Каждый язык имеет собственные правила. Английский использует две формы: единственное и множественное число. Русский и многие другие славянские языки — три формы. Vue I18n поддерживает сложные правила через объект pluralizationRules, который можно расширять:

import { createI18n } from 'vue-i18n';

const i18n = createI18n({
  locale: 'ru',
  messages,
  pluralizationRules: {
    ru: function(choice, choicesLength) {
      if (choice % 10 === 1 && choice % 100 !== 11) return 0;
      if ([2,3,4].includes(choice % 10) && ![12,13,14].includes(choice % 100)) return 1;
      return 2;
    }
  }
});

Динамическая смена языка Изменение локали в приложении производится через свойство locale:

i18n.global.locale = 'en';

После смены локали все шаблоны автоматически обновляются, отображая тексты на новом языке с учетом плюрализации.

Интеграция с компонентами и реактивными данными

Компоненты Vue могут использовать реактивные данные для динамической генерации текста с правильной формой слова:

<template>
  <div>
    <label for="count">Количество:</label>
    <input id="count" type="number" v-model="itemCount" />
    <p>{{ $tc('cart', itemCount, { count: itemCount }) }}</p>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const itemCount = ref(1);
    return { itemCount };
  }
};
</script>

С помощью реактивной переменной itemCount текст автоматически обновляется при изменении числа, корректно отображая формы слова.

Продвинутая настройка и кастомизация

Vue I18n позволяет создавать кастомные функции форматирования, например для валюты или дат. Плюрализация можно комбинировать с форматированием чисел, что особенно важно в приложениях электронной коммерции и финансовых сервисах. Также возможна динамическая загрузка языковых пакетов для оптимизации производительности больших проектов.

Пример кастомного форматирования с плюрализацией:

const messages = {
  ru: {
    balance: 'У вас {amount} {amount, plural, =1 {рубль} one {рубля} few {рублей} other {рублей}}'
  }
};

Это позволяет точно управлять локализацией сложных фраз с учётом правил языка.

Использование Vuex и Composition API с локализацией

Для крупных приложений можно интегрировать локализацию с состоянием через Vuex или Composition API. Состояние локали и выбранного языка хранится централизованно, что позволяет менять язык в любом компоненте без дополнительных действий.

// store.js
import { reactive } from 'vue';

export const store = reactive({
  locale: 'ru'
});

// App.vue
watch(() => store.locale, (newLocale) => {
  i18n.global.locale = newLocale;
});

Такой подход обеспечивает единый источник правды и упрощает управление множеством компонентов с локализованным контентом.

Оглавление