Почему не используешь статический метод Vue?

Почему не использую статический метод Vue

Статический метод Vue — это подход из Vue 2 для создания глобальных методов, которые были доступны через Vue.method(). В современной разработке я избегаю этого паттерна по нескольким важным причинам.

Что такое статический метод Vue

В Vue 2 это выглядело так:

// Старый Vue 2 подход
Vue.prototype.$http = axios;
Vue.prototype.$notify = function(message) { /* ... */ };

// Использование в компонентах
export default {
  methods: {
    fetchData() {
      this.$http.get('/api/data');
    }
  }
};

Основные проблемы

1. Отсутствие типизации

Статический метод - нет type safety:

// main.js
Vue.prototype.$http = axios;

// Component.vue
export default {
  methods: {
    async getData() {
      // TypeScript не знает, что это axios
      // Нет автодополнения, нет типов
      const response = await this.$http.get('/api/data');
      // ^ Ошибка типа не будет поймана
    }
  }
};

Современный подход с инъекцией зависимостей - полная типизация:

// types/api.ts
export interface ApiService {
  get<T>(url: string): Promise<T>;
  post<T>(url: string, data: any): Promise<T>;
}

// useApi.ts
import { inject } from 'vue';
import type { ApiService } from './types/api';

export function useApi(): ApiService {
  return inject<ApiService>('api')!;
}

// Component.vue
<script setup lang="ts">
import { useApi } from '@/composables/useApi';

const api = useApi();

const getData = async () => {
  // TypeScript знает все методы и типы возвращаемых значений
  const response = await api.get<UserData>('/api/data');
  // ✓ Автодополнение работает
  // ✓ Типы проверяются
};
</script>

2. Скрытые зависимости

Статический метод - зависимость неявная:

// Component.vue
export default {
  methods: {
    async fetchUser(id) {
      // Откуда берется this.$http?
      // Непонятно, нужно искать в main.js
      const user = await this.$http.get(`/api/users/${id}`);
      return user;
    }
  }
};

Composable - зависимость явная:

// composables/useUser.ts
import { useApi } from './useApi'; // Явно импортируем зависимость

export function useUser() {
  const api = useApi();
  
  const fetchUser = async (id: string) => {
    return await api.get(`/api/users/${id}`);
  };
  
  return { fetchUser };
}

3. Сложность тестирования

Статический метод - сложно мокировать:

// Component.vue
export default {
  methods: {
    async uploadFile(file) {
      return this.$upload.post('/upload', file);
      // Как мокировать $upload в тестах?
    }
  }
};

// test.js
import Vue from 'vue';
import Component from './Component.vue';

describe('Component', () => {
  it('uploads file', async () => {
    // Нужно мокировать Vue.prototype
    const mockUpload = jest.fn();
    Vue.prototype.$upload = { post: mockUpload };
    
    // Тяжело отслеживать, какой компонент использует какой мок
    // Моки могут конфликтовать между тестами
  });
});

Composable - легко тестировать:

// composables/useUpload.ts
import { inject } from 'vue';

export function useUpload() {
  const upload = inject('uploadService');
  
  const uploadFile = async (file: File) => {
    return upload.post('/upload', file);
  };
  
  return { uploadFile };
}

// useUpload.test.ts
import { describe, it, expect, vi } from 'vitest';
import { useUpload } from './useUpload';

describe('useUpload', () => {
  it('uploads file', async () => {
    // Легко передать mock через inject
    const mockUpload = {
      post: vi.fn().mockResolvedValue({ success: true })
    };
    
    // Инъекцию можно передать прямо в тест
    const { uploadFile } = useUpload();
    await uploadFile(new File([], 'test.txt'));
    
    expect(mockUpload.post).toHaveBeenCalled();
  });
});

4. Глобальное загрязнение

Статический метод - глобальное пространство имен:

// main.js - много разных методов добавляются везде
Vue.prototype.$http = axios;
Vue.prototype.$notify = notificationService;
Vue.prototype.$analytics = analyticsService;
Vue.prototype.$i18n = i18nService;
Vue.prototype.$auth = authService;
Vue.prototype.$cache = cacheService;
// ...

// Component.vue
this.$http.get(); // Что это вообще?
this.$notify(); // Откуда это?

// Сложно отследить, где что используется
// IDE не может автоматически найти все использования

Composables - явные зависимости:

// composables/index.ts
export { useApi } from './useApi';
export { useNotification } from './useNotification';
export { useAnalytics } from './useAnalytics';
export { useI18n } from './useI18n';

// Component.vue
<script setup>
import { useApi, useNotification } from '@/composables';

const api = useApi();
const notify = useNotification();

// Ясно, что используется
// IDE может найти все использования
</script>

5. Версионирование и обновления

Статический метод - сложно обновлять:

// Если нужно обновить API клиента версию
// Нужно изменить main.js и пересоздавать весь Vue

// main.js (старая версия)
Vue.prototype.$http = axios; // v0.27

// Хотим обновить на v1.0
// Должны обновить везде где используется this.$http

Composables - простое обновление:

// useApi.ts
import axios from 'axios'; // Легко обновить version

export function useApi() {
  // Одно место для обновления
  const client = axios.create({
    baseURL: '/api/v1'
  });
  
  return {
    get: (url) => client.get(url),
    post: (url, data) => client.post(url, data)
  };
}

// Все компоненты автоматически используют новую версию

Современный подход в Vue 3

Composables + provide/inject:

// main.ts
import { createApp } from 'vue';
import { createApiService } from '@/services/api';
import { createNotificationService } from '@/services/notification';

const app = createApp(App);

const apiService = createApiService();
const notificationService = createNotificationService();

// Провайдим на уровне приложения
app.provide('api', apiService);
app.provide('notification', notificationService);

app.mount('#app');

// Component.vue
<script setup>
import { useApi } from '@/composables/useApi';
import { useNotification } from '@/composables/useNotification';

const api = useApi();
const notify = useNotification();

const handleClick = async () => {
  try {
    const data = await api.get('/data');
    notify.success('Data loaded');
  } catch (error) {
    notify.error('Failed to load data');
  }
};
</script>

Преимущества современного подхода

1. Типизация - полная поддержка TypeScript
2. Tree-shaking - неиспользуемый код удаляется из сборки
3. Тестируемость - легко мокировать зависимости
4. Явность - понятно, откуда берутся зависимости
5. IDE поддержка - автодополнение и переходы работают идеально
6. Масштабируемость - легко добавлять новые сервисы

В итоге, я не использую статические методы Vue, потому что Composition API с composables и provide/inject дает намного лучшую типизацию, тестируемость и читаемость кода.