DevFlow/docs/06-前端开发/View改造指南-2026-06-12.md

# View 改造指南 — 硬编码到 Store 对接

> 创建: 2026-06-10 | 状态: 初稿

---

## 概述

当前所有 Vue 页面使用硬编码数据 (`ref([...])`)，Pinia Store 和 View 完全独立。本文档指导如何将 View 改造为通过 Store → IPC 获取真实数据。

## 当前问题

1. **数据硬编码** — 每个 View 用 `ref([...])` 定义假数据
2. **Store 未接入** — Pinia Store 有 state/getter 但无 action
3. **事件处理空函数** — 按钮点击绑定 `() => {}`
4. **Arco Design 未使用** — 仅 CSS 变量覆盖，未引入组件

## 改造步骤

### Step 1: Store 添加 Actions

```typescript
// stores/projectStore.ts
import { invoke } from '@tauri-apps/api/core'

export const useProjectStore = defineStore('project', () => {
  const projects = ref<Project[]>([])

  // 新增 action
  async function fetchProjects() {
    projects.value = await invoke<Project[]>('get_projects')
  }

  async function createProject(input: CreateProjectInput) {
    const project = await invoke<Project>('create_project', { input })
    projects.value.push(project)
  }

  return { projects, fetchProjects, createProject }
})
```

### Step 2: View 接入 Store

```typescript
// views/ProjectsView.vue — 改造前
const projects = ref([
  { id: '1', name: '项目A', ... },  // 硬编码
])

// views/ProjectsView.vue — 改造后
const store = useProjectStore()
const { projects } = storeToRefs(store)

onMounted(() => {
  store.fetchProjects()
})
```

### Step 3: 事件绑定真实操作

```typescript
// 改造前
const handleCreate = () => {}

// 改造后
const handleCreate = async () => {
  await store.createProject(form)
  modalVisible.value = false
}
```

### Step 4: 加载与错误状态

```vue
<template>
  <a-spin :loading="store.loading">
    <!-- 内容 -->
  </a-spin>
</template>
```

## 涉及页面

| 页面 | Store | 改造优先级 |
|------|-------|-----------|
| ProjectsView | projectStore | P0 |
| TasksView | taskStore | P0 |
| WorkflowView | workflowStore | P0 |
| IdeasView | ideaStore | P1 |
| DashboardView | 多个 Store | P2 |

## 相关文档

- [Tauri IPC 模式](../01-技术文档/Tauri-IPC模式-2026-06-12.md)
- [前后端类型对齐](../02-架构设计/前后端类型对齐-2026-06-12.md)
- [DEVFLOW-3 Store 对接实施](../04-功能迭代/DEVFLOW-3.Store对接实施-2026-06-12.md)