Что будет внутри отдельного модуля приложения на Vue?

Структура модуля в Vue приложении

Модуль в Vue — это изолированная часть приложения, которая инкапсулирует компоненты, состояние, маршруты и сервисы для конкретной фичи. Это позволяет масштабировать приложение и избежать конфликтов имён.

Типичная структура модуля

src/
modules/
  users/
    components/
      UserList.vue
      UserForm.vue
      UserProfile.vue
    views/
      UsersPage.vue
    store/
      users.module.js    // Vuex или Pinia
    services/
      userService.js
      api.js
    types/
      user.types.ts
    router/
      index.js           // Маршруты модуля
    index.js             // Экспорт модуля

Главные компоненты модуля

1. Компоненты (components/)

Уникальные для этого модуля компоненты:

// components/UserForm.vue
<template>
  <form @submit.prevent="handleSubmit">
    <input v-model="form.name" placeholder="Name" />
    <button type="submit">Create User</button>
  </form>
</template>

<script setup>
import { reactive } from 'vue';
import { userService } from '../services/userService';

const form = reactive({ name: '' });

const handleSubmit = async () => {
  await userService.createUser(form);
};
</script>

2. Состояние (store/)

Вуекс модуль или Pinia store для управления состоянием:

// store/users.module.js (Vuex)
const state = () => ({
  users: [],
  loading: false,
  error: null
});

const mutations = {
  SET_USERS(state, users) {
    state.users = users;
  },
  SET_LOADING(state, loading) {
    state.loading = loading;
  }
};

const actions = {
  async fetchUsers({ commit }) {
    commit('SET_LOADING', true);
    try {
      const users = await userService.getUsers();
      commit('SET_USERS', users);
    } catch (error) {
      commit('SET_ERROR', error);
    } finally {
      commit('SET_LOADING', false);
    }
  }
};

const getters = {
  activeUsers: (state) => state.users.filter(u => u.active)
};

export default { namespaced: true, state, mutations, actions, getters };

Или с Pinia:

// store/users.store.js (Pinia)
import { defineStore } from 'pinia';
import { ref, computed } from 'vue';

export const useUsersStore = defineStore('users', () => {
  const users = ref([]);
  const loading = ref(false);

  const activeUsers = computed(() => users.value.filter(u => u.active));

  const fetchUsers = async () => {
    loading.value = true;
    try {
      users.value = await userService.getUsers();
    } finally {
      loading.value = false;
    }
  };

  return { users, loading, activeUsers, fetchUsers };
});

3. Сервисы (services/)

Бизнес-логика и работа с API:

// services/userService.js
import { api } from '@/services/api';

export const userService = {
  async getUsers() {
    const { data } = await api.get('/users');
    return data;
  },

  async createUser(userData) {
    const { data } = await api.post('/users', userData);
    return data;
  },

  async updateUser(id, userData) {
    const { data } = await api.put(`/users/${id}`, userData);
    return data;
  },

  async deleteUser(id) {
    await api.delete(`/users/${id}`);
  }
};

4. Маршруты (router/)

Маршруты, относящиеся к модулю:

// router/users.routes.js
export const usersRoutes = [
  {
    path: '/users',
    component: () => import('../views/UsersPage.vue'),
    meta: { requiresAuth: true },
    children: [
      {
        path: ':id',
        component: () => import('../views/UserDetailPage.vue')
      }
    ]
  }
];

5. Типы (types/)

TypeScript типы для модуля:

// types/user.types.ts
export interface User {
  id: string;
  name: string;
  email: string;
  active: boolean;
  createdAt: Date;
}

export interface CreateUserDTO {
  name: string;
  email: string;
}

Как регистрировать модуль в приложении

Vuex

// store/index.js
import { createStore } from 'vuex';
import usersModule from '@/modules/users/store/users.module';

export default createStore({
  modules: {
    users: usersModule
  }
});

Маршруты

// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import { usersRoutes } from '@/modules/users/router';

const routes = [
  ...usersRoutes,
  // другие модули
];

export default createRouter({ history: createWebHistory(), routes });

Экспорт модуля

// modules/users/index.js
export { default as usersModule } from './store/users.module';
export { usersRoutes } from './router';
export { userService } from './services/userService';
export * from './types';

Преимущества модульной структуры

1. Изоляция — компоненты и логика не пересекаются
2. Переиспользование — модуль можно скопировать в другой проект
3. Масштабируемость — легко добавлять новые модули
4. Тестирование — проще тестировать отдельный модуль
5. Совместная работа — разные разработчики работают в разных модулях

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