模块开发

Vite TS Starter (VTS) 采用基于模块化的设计架构，通过清晰的目录结构和模块划分，实现高内聚低耦合的代码组织方式。

目录结构

src/
├── assets/          # 静态资源
├── components/      # 公共组件
├── hooks/           # 可复用 Hooks
├── locales/         # 国际化语言包
├── mixins/          # Mixins 文件
├── modules/         # 业务模块均存放到该位置下，每个模块下独享状态
│   ├── Project/        
│   │   ├── api/
│   │   ├── components/
│   │   ├── data/
│   │   ├── pages/
│   │   └── store/
│   ├── Result/
│   │   ├── api/
│   │   ├── components/
│   │   ├── data/
│   │   ├── pages/
│   │   └── store/
│   ├── UserAccount/
│   │   ├── api/
│   │   ├── components/
│   │   ├── data/
│   │   ├── pages/
│   │   └── store/
│   └── ...
├── router/          # 路由配置
├── store/           # 全局状态管理
├── styles/          # 全局样式
├── types/           # TypeScript 类型定义
├── utils/           # 工具函数
└── widgets/         # 通用业务部件

模块化设计

1. 业务模块结构

每个业务模块（modules/目录下）都基本遵循以下标准结构：

ModuleName/
├── api/           # 模块相关的 API 接口
├── components/    # 模块私有组件
├── data/          # 模块数据与配置
├── pages/         # 模块页面
└── store/         # 模块状态管理
    ├── index.ts            # 模块状态入口文件
    ├── mutations-type.ts   # mutation 类型常量
    └── types.ts           # 类型定义

2. 内置模块

VTS 目前已内置了以下三个示例模块，作为其支撑组件，你可以根据自己的需求自由调整：

• Project：项目管理
• Result：项目详情结果管理
• UserAccount：用户账户管理

状态管理

1. 创建/维护模块状态

每个业务模块维护自己的状态管理，遵循以下结构：

// 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 {
  // 模块状态类型定义
}

const ModuleStore: Module<IModuleState, IGlobalState> = {
  namespaced: true,
  _name: 'ModuleName',
  state: {
    // 模块状态
    demoInfo: {},
  },
  getters: {
  },
  mutations: {
    [MUTATION.UPDATE_STATE](state, payload) {
      // 状态更新
      state.demoInfo = payload
    }
  },
  actions: {
    async fetchData({ commit }, params) {
      // 异步操作
      const result = await ModuleNameAPI.getData(params)
      await sleep(200)
      commit(MUTATION.UPDATE_STATE, result)
      return this.filterResponse(result)
    }
  },
  ...mixin
}

export default ModuleStore

2. 状态注册

打开 src/store/index.ts，将上一步编写好的模块状态及对应的 Type 引入到对应代码位置：

若已经在这里注册过，请忽略这一步，直接查看3. 状态访问

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. 引入刚刚创建好的模块状态及对应的 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. 定义全局 Type 类型
  ModuleName: IModuleStore
}

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

    // 3. 接着在这里注册
    ModuleName 
  },
  plugins
})

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

export { store }

3. 状态访问

在组件 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>