安装与初始化

确保已安装 Node.js 和 Vue CLI。通过以下命令全局安装 CodeBuddy Code CLI：

npm install -g @codebuddy/code-cli

创建 Vue 项目并添加 Pinia：

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

配置 Pinia 存储

在 src/stores 目录下创建 todoStore.js 文件：

import { defineStore } from 'pinia';

export const useTodoStore = defineStore('todo', {
  state: () => ({
    tasks: [],
    filter: 'all'
  }),
  actions: {
    addTask(title) {
      this.tasks.push({ id: Date.now(), title, completed: false });
    },
    toggleTask(id) {
      const task = this.tasks.find(t => t.id === id);
      if (task) task.completed = !task.completed;
    }
  },
  getters: {
    filteredTasks() {
      return this.filter === 'all' 
        ? this.tasks 
        : this.tasks.filter(t => this.filter === 'completed' ? t.completed : !t.completed);
    }
  }
});

集成 CodeBuddy CLI

在项目根目录创建 codebuddy.config.js：

module.exports = {
  plugins: ['pinia'],
  rules: {
    'pinia/no-direct-state-access': 'error'
  }
};

运行代码检查：

code-cli lint

构建 UI 组件

创建 src/components/TodoList.vue：

<template>
  <div>
    <input v-model="newTask" @keyup.enter="addTask">
    <select v-model="filter">
      <option value="all">All</option>
      <option value="completed">Completed</option>
    </select>
    <ul>
      <li v-for="task in filteredTasks" :key="task.id">
        <input type="checkbox" v-model="task.completed">
        {{ task.title }}
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useTodoStore } from '@/stores/todoStore';

const todoStore = useTodoStore();
const newTask = ref('');
const filter = ref('all');

const addTask = () => {
  if (newTask.value.trim()) {
    todoStore.addTask(newTask.value.trim());
    newTask.value = '';
  }
};

const filteredTasks = computed(() => todoStore.filteredTasks);
</script>

状态持久化

安装 pinia-plugin-persistedstate：

npm install pinia-plugin-persistedstate

修改 src/main.js：

import { createApp } from 'vue';
import { createPinia } from 'pinia';
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
import App from './App.vue';

const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);

createApp(App).use(pinia).mount('#app');

更新 store 配置：

export const useTodoStore = defineStore('todo', {
  // ...原有配置...
  persist: {
    paths: ['tasks']
  }
});

自动化测试

创建 tests/unit/todoStore.spec.js：

import { setActivePinia, createPinia } from 'pinia';
import { useTodoStore } from '@/stores/todoStore';

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

  test('adds new task', () => {
    const store = useTodoStore();
    store.addTask('Test task');
    expect(store.tasks).toHaveLength(1);
  });
});

运行测试：

npm run test:unit