Module Development

Vite TS Starter (VTS) adopts a modular design architecture, achieving high cohesion and low coupling through a clear directory structure and module division.

Directory Structure

src/
├── assets/          # Static Resources
├── components/      # Shared Components
├── hooks/           # Reusable Hooks
├── locales/         # i18n Languages
├── mixins/          # Mixins
├── modules/         # Business modules are stored here, each module has its own state
│   ├── Project/        
│   │   ├── api/
│   │   ├── components/
│   │   ├── data/
│   │   ├── pages/
│   │   └── store/
│   ├── Result/
│   │   ├── api/
│   │   ├── components/
│   │   ├── data/
│   │   ├── pages/
│   │   └── store/
│   ├── UserAccount/
│   │   ├── api/
│   │   ├── components/
│   │   ├── data/
│   │   ├── pages/
│   │   └── store/
│   └── ...
├── router/          # Routing Configuration
├── store/           # Global State Management
├── styles/          # Global Styles
├── types/           # TypeScript Type Definitions
├── utils/           # Utility Functions
└── widgets/         # Common Business Widgets

Modular Design

1. Business Module Structure

Each business module (under the modules/ directory) generally follows the following standard structure：

ModuleName/
├── api/           # HTTP API Interfaces
├── components/    # Private Components
├── data/          # Module Data and Configuration
├── pages/         # Route pages
└── store/         # Module State Management
    ├── index.ts            # Module State Entry File
    ├── mutations-type.ts   # Mutation Type Constants
    └── types.ts            # Type Definitions

2. Built-in Modules

VTS currently includes the following three example modules as supporting components. You can adjust them according to your needs:

• Project: Project Management
• Result: Project Result Management
• UserAccount: User Account Management

State Management

1. Edit Module State

Each business module maintains its own state management, following the structure below：

// modules/ModuleName/store/index.ts
import type { Module } from 'vuex'
import MUTATION from './mutations-type'
import mixin from '@/store/utils/mixin'
import type { IGlobalState } from '@/store'
import * as ModuleNameAPI from '@/modules/ModuleName/api'
import { sleep } from '@/utils/request'

interface IModuleState {
  // Module State Type Definitions
}

const ModuleStore: Module<IModuleState, IGlobalState> = {
  namespaced: true,
  _name: 'ModuleName',
  state: {
    // Module State
    demoInfo: {},
  },
  getters: {
  },
  mutations: {
    [MUTATION.UPDATE_STATE](state, payload) {
      // State Update
      state.demoInfo = payload
    }
  },
  actions: {
    async fetchData({ commit }, params) {
      // Async HTTP
      const result = await ModuleNameAPI.getData(params)
      await sleep(200)
      commit(MUTATION.UPDATE_STATE, result)
      return this.filterResponse(result)
    }
  },
  ...mixin
}

export default ModuleStore

2. State Registration

Open src/store/index.ts，and import the module state and corresponding Type into the appropriate code location:

If you have already registered here, please skip this step and proceed to3. State Access

import { createStore } from 'vuex'

import type { IUserAccountState } from '@/modules/UserAccount/store'
import UserAccount from '@/modules/UserAccount/store'
import type { IProjectModule } from '@/modules/Project/store'
import Project from '@/modules/Project/store'
import type { IResultModule } from '@/modules/Result/store'
import ResultModule from '@/modules/Result/store'

// 1. Import the newly created module state and corresponding Type
import type { IModuleStore } from '@/modules/ModuleName/store'
import ModuleStore from '@/modules/ModuleName/store'

import plugins from '@/store/plugins'

export interface IGlobalState {
  UserAccount: IUserAccountState
  Result: IResultModule
  Project: IProjectModule

  // 2. Define the global Type
  ModuleName: IModuleStore
}

const store = createStore<IGlobalState>({
  modules: {
    UserAccount,
    Project,
    Result: ResultModule,

    // 3. Register here
    ModuleName 
  },
  plugins
})

export function setupStore(app: App<Element>) {
  app.use(store)
}

export { store }

3. State Access

Use in the component setup:

<script setup lang="ts">
import UserAccountModule from '@/modules/ModuleName/store'
const store = useBaseStore()

store.dispatch('ModuleName/fetchData', {
  // ...params
})

const currentDemoInfo = computed(() => store.state.ModuleName.demoInfo)
</script>