使用 CodeBuddy Code CLI 和 Pinia 构建 Vue 待办应用的数据流设计

初始化项目

通过 CodeBuddy Code CLI 快速生成 Vue 项目。运行以下命令创建项目并添加 Pinia 支持：

npx codebuddy create vue-todo-app
cd vue-todo-app
codebuddy add pinia

配置 Pinia 存储

在 src/stores/todo.js 中定义待办事项的状态管理逻辑：

import { defineStore } from 'pinia'

export const useTodoStore = defineStore('todo', {
  state: () => ({
    todos: [],
    filter: 'all'
  }),
  actions: {
    addTodo(text) {
      this.todos.push({ id: Date.now(), text, completed: false })
    },
    toggleTodo(id) {
      const todo = this.todos.find(t => t.id === id)
      if (todo) todo.completed = !todo.completed
    }
  },
  getters: {
    filteredTodos() {
      return this.filter === 'completed' 
        ? this.todos.filter(t => t.completed)
        : this.filter === 'active'
          ? this.todos.filter(t => !t.completed)
          : this.todos
    }
  }
})

集成组件与存储

在组件中使用存储并实现数据绑定。创建 src/components/TodoList.vue：

<script setup>
import { useTodoStore } from '@/stores/todo'
const store = useTodoStore()
</script>

<template>
  <div v-for="todo in store.filteredTodos" :key="todo.id">
    <input 
      type="checkbox" 
      :checked="todo.completed"
      @change="store.toggleTodo(todo.id)"
    >
    <span>{{ todo.text }}</span>
  </div>
</template>

实现数据持久化

通过插件扩展 Pinia 功能，添加 localStorage 持久化：

// src/stores/persistence.js
export function persistState() {
  return (context) => {
    const key = `pinia-${context.store.$id}`
    const savedState = localStorage.getItem(key)
    if (savedState) context.store.$patch(JSON.parse(savedState))
    
    context.store.$subscribe(() => {
      localStorage.setItem(key, JSON.stringify(context.store.$state))
    })
  }
}

// 在 store 中应用
export const useTodoStore = defineStore('todo', {
  // ...原有配置...
  plugins: [persistState()]
})

测试数据流

创建测试验证状态管理逻辑：

// tests/unit/todo.spec.js
import { setActivePinia, createPinia } from 'pinia'
import { useTodoStore } from '@/stores/todo'

describe('Todo Store', () => {
  beforeEach(() => {
    setActivePinia(createPinia())
  })

  test('adds new todo', () => {
    const store = useTodoStore()
    store.addTodo('Test todo')
    expect(store.todos).toHaveLength(1)
  })
})

部署优化

配置 CodeBuddy 的构建优化选项，在 codebuddy.config.js 中添加：

module.exports = {
  build: {
    piniaAutoImports: true,
    stateSerialization: 'minimal'
  }
}

通过以上设计，待办应用实现了清晰的数据流：组件触发动作 → 存储更新状态 → 计算属性自动响应 → 组件重新渲染。Pinia 的集中式状态管理配合 CodeBuddy 的自动化工具链，显著提升了开发效率和可维护性。