🔥 Упрощаем импорт переменных в VueJS 3 🔥

Друзья, делюсь полезным лайфхаком для тех, кто пишет на Vue 3! Если у вас есть повторяющиеся переменные, например, ссылка на бэкенд, и вы устали копировать её в каждом компоненте — пора навести порядок.

🔹 Как правильно хранить переменные?

1️⃣ В папке /src создаём директорию config.
2️⃣ Внутри создаём файл api.ts.
3️⃣ Добавляем туда нужную переменную:

export const API_BASE_URL = 'https://your-site.com';

4️⃣ Теперь, в любом компоненте, где нужно использовать эту переменную, просто импортируем:

import { API_BASE_URL } from '../config/api';

const response = await fetch(`${API_BASE_URL}/user_info/${userId}`);

📌 Плюсы такого подхода:

✅ Легко менять URL в одном месте, а не по всему проекту.
✅ Улучшает читаемость кода.
✅ Упрощает рефакторинг и поддержку проекта.

⚡️ Дополнительный совет:

Можно хранить не только API_BASE_URL, но и другие глобальные настройки, токены и ключи в этом же файле, но помните, что в JavaScript все на веду. Поэтому, критически важные переменные сохраняйте на стороне бэкенда.