AI原生前端开发（041）：AI辅助的状态管理（Zustand/Pinia）

前言

状态管理是复杂应用的核心！AI可以帮我们快速实现Zustand和Pinia状态管理！

---

1. AI辅助Zustand开发（React）

1.1 基础Store

/* 提示词：
"用Zustand创建一个任务管理Store，支持：
1. 添加任务
2. 删除任务
3. 切换任务完成状态
4. 过滤任务"
*/

// stores/useTaskStore.ts
import { create } from 'zustand';
import { devtools, persist } from 'zustand/middleware';

interface Task {
  id: string;
  title: string;
  completed: boolean;
  createdAt: Date;
}

interface TaskStore {
  tasks: Task[];
  filter: 'all' | 'active' | 'completed';
  
  // Actions
  addTask: (title: string) => void;
  deleteTask: (id: string) => void;
  toggleTask: (id: string) => void;
  setFilter: (filter: TaskStore['filter']) => void;
  clearCompleted: () => void;
  
  // Computed
  filteredTasks: Task[];
  activeCount: number;
}

export const useTaskStore = create<TaskStore>()(
  devtools(
    persist(
      (set, get) => ({
        tasks: [],
        filter: 'all',
        
        addTask: (title) => set((state) => ({
          tasks: [
            ...state.tasks,
            {
              id: Date.now().toString(),
              title,
              completed: false,
              createdAt: new Date()
            }
          ]
        })),
        
        deleteTask: (id) => set((state) => ({
          tasks: state.tasks.filter(t => t.id !== id)
        })),
        
        toggleTask: (id) => set((state) => ({
          tasks: state.tasks.map(t => 
            t.id === id ? { ...t, completed: !t.completed } : t
          )
        })),
        
        setFilter: (filter) => set({ filter }),
        
        clearCompleted: () => set((state) => ({
          tasks: state.tasks.filter(t => !t.completed)
        })),
        
        get filteredTasks() {
          const { tasks, filter } = get();
          if (filter === 'active') return tasks.filter(t => !t.completed);
          if (filter === 'completed') return tasks.filter(t => t.completed);
          return tasks;
        },
        
        get activeCount() {
          return get().tasks.filter(t => !t.completed).length;
        }
      }),
      {
        name: 'task-storage' // localStorage key
      }
    ),
    { name: 'TaskStore' } // DevTools name
  )
);

// 使用示例
/*
function TaskApp() {
  const { tasks, filteredTasks, filter, activeCount, addTask, deleteTask, toggleTask, setFilter, clearCompleted } = useTaskStore();
  
  return (
    <div>
      <h1>任务管理器 ({activeCount} 待办)</h1>
      <div>
        {['all', 'active', 'completed'].map(f => (
          <button key={f} onClick={() => setFilter(f)}>
            {f === 'all' ? '全部' : f === 'active' ? '进行中' : '已完成'}
          </button>
        ))}
      </div>
      {filteredTasks.map(task => (
        <div key={task.id}>
          <input 
            type="checkbox" 
            checked={task.completed}
            onChange={() => toggleTask(task.id)}
          />
          {task.title}
          <button onClick={() => deleteTask(task.id)}>删除</button>
        </div>
      ))}
      <button onClick={clearCompleted}>清除已完成</button>
    </div>
  );
}
*/

---

2. AI辅助Pinia开发（Vue）

2.1 Pinia Store

/* 提示词：
"用Pinia创建一个用户管理Store"
*/

// stores/user.ts
import { defineStore } from 'pinia';
import { ref, computed } from 'vue';

interface User {
  id: string;
  name: string;
  email: string;
  avatar?: string;
}

export const useUserStore = defineStore('user', () => {
  // State
  const user = ref<User | null>(null);
  const isLoading = ref(false);
  const error = ref<string | null>(null);

  // Getters
  const isLoggedIn = computed(() => user.value !== null);
  const userName = computed(() => user.value?.name || '访客');

  // Actions
  async function login(email: string, password: string) {
    isLoading.value = true;
    error.value = null;
    try {
      // 模拟API
      await new Promise(resolve => setTimeout(resolve, 1000));
      user.value = {
        id: '1',
        name: '张三',
        email
      };
    } catch (err) {
      error.value = '登录失败';
    } finally {
      isLoading.value = false;
    }
  }

  function logout() {
    user.value = null;
  }

  function updateProfile(updates: Partial<User>) {
    if (user.value) {
      user.value = { ...user.value, ...updates };
    }
  }

  return {
    user,
    isLoading,
    error,
    isLoggedIn,
    userName,
    login,
    logout,
    updateProfile
  };
}, {
  persist: true // 持久化
});

// 使用示例
/*
<script setup lang="ts">
import { useUserStore } from '@/stores/user';

const userStore = useUserStore();

const handleLogin = async () => {
  await userStore.login('test@example.com', 'password');
};
</script>

<template>
  <div>
    <div v-if="userStore.isLoading">加载中...</div>
    <div v-else-if="userStore.isLoggedIn">
      <p>欢迎, {{ userStore.userName }}</p>
      <button @click="userStore.logout">登出</button>
    </div>
    <button v-else @click="handleLogin">登录</button>
  </div>
</template>
*/

---

3. 今日小结

这一篇我们学习了：

1. AI辅助Zustand开发
2. AI辅助Pinia开发

---

4. 下篇预告

下一篇，我们学习 AI辅助的路由设计与优化！