Интеграция i18n с Pinia во Vue3: полное руководство

В этой статье мы разберем, как эффективно использовать систему интернационализации (i18n) вместе с хранилищами Pinia во Vue.js приложениях.

1. Установка и базовая настройка

npm install pinia vue-i18n
# или
yarn add pinia vue-i18n

2. Создание локалей

Создайте JSON-файлы с переводами:

// locales/ru.json
{
  "cart": {
    "title": "Корзина",
    "empty": "Ваша корзина пуста"
  }
}

3. Инициализация i18n

// i18n.js
import { createI18n } from 'vue-i18n';
import ru from './locales/ru.json';

export default createI18n({
  locale: 'ru',
  fallbackLocale: 'en',
  messages: { ru }
});

4. Создание хранилища с i18n

// stores/cartStore.js
import { defineStore } from 'pinia';
import { useI18n } from 'vue-i18n';

export const useCartStore = defineStore('cart', {
  state: () => ({ items: [] }),
  getters: {
    cartTitle: () => {
      const { t } = useI18n();
      return t('cart.title');
    }
  },
  actions: {
    showEmptyMessage() {
      const { t } = useI18n();
      alert(t('cart.empty'));
    }
  }
});

5. Использование в компонентах

<script setup>
import { useCartStore } from '@/stores/cartStore';
const cartStore = useCartStore();
</script>

<template>
  <h1>{{ cartStore.cartTitle }}</h1>
  <button @click="cartStore.showEmptyMessage">
    Проверить корзину
  </button>
</template>

6. Переключение языков

// stores/localeStore.js
export const useLocaleStore = defineStore('locale', {
  actions: {
    setLocale(lang) {
      const { locale } = useI18n();
      locale.value = lang;
    }
  }
});

7. Частые проблемы и решения

• Ошибка «useI18n called outside setup()» — убедитесь, что используете хук только в setup()
• Нет реактивности — оберните переводы в computed()

8. Альтернативные подходы

• Использование provide/inject для i18n
• Создание отдельного хранилища для локализации
• Использование composable-функций