状态管理哲学

  </details>

**在 React 中使用：**

```jsx
import { useSelector, useDispatch } from 'react-redux'

function TodoList() {
  // 读取 state
  const todos = useSelector(state => state.todos)

  // 获取 dispatch 函数
  const dispatch = useDispatch()

  return (
    <ul>
      {todos.map(todo => (
        <li
          key={todo.id}
          onClick={() => dispatch(toggleTodo(todo.id))}
          style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}
        >
          {todo.text}
        </li>
      ))}
    </ul>
  )
}
  

  // ❌ 错误：数据分散在各处
const ProductDetail = { cart: [] }
const CartPage = { items: [] }
const Header = { count: 0 }

// ✅ 正确：数据集中管理
const cartStore = { items: [] }  // 唯一的数据源
  

  // ❌ 错误：直接修改
state.items.push(newItem)

// ✅ 正确：创建新对象
state.items = [...state.items, newItem]
  

  <!-- ❌ 错误：状态在子组件中 -->
<!-- TODO: Parent START -->
  <!-- TODO: Child :data="childData" @update="childData = $event" -->
<!-- TODO: Parent END -->

<!-- ✅ 正确：状态在父组件中 -->
<!-- TODO: Parent START -->
  <!-- TODO: Child :data="parentData" @update="parentData = $event" -->
<!-- TODO: Parent END -->
  

  // stores/cart.js
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'

export const useCartStore = defineStore('cart', () => {
  // ============ State（状态）============
  const items = ref([])  // 购物车商品列表
  const selectedIds = ref([])  // 选中的商品 ID

  // 从 localStorage 恢复数据
  const initFromStorage = () => {
    const stored = localStorage.getItem('cart')
    if (stored) {
      try {
        const data = JSON.parse(stored)
        items.value = data.items || []
        selectedIds.value = data.selectedIds || []
      } catch (e) {
        console.error('读取购物车数据失败:', e)
      }
    }
  }

  // 持久化到 localStorage
  const persist = () => {
    localStorage.setItem('cart', JSON.stringify({
      items: items.value,
      selectedIds: selectedIds.value
    }))
  }

  // ============ Getters（计算属性）============
  const itemCount = computed(() =>
    items.value.reduce((sum, item) => sum + item.quantity, 0)
  )

  const totalPrice = computed(() =>
    items.value.reduce((sum, item) => sum + item.price * item.quantity, 0)
  )

  const selectedItems = computed(() =>
    items.value.filter(item => selectedIds.value.includes(item.id))
  )

  const selectedTotalPrice = computed(() =>
    selectedItems.value.reduce((sum, item) => sum + item.price * item.quantity, 0)
  )

  // ============ Actions（方法）============
  const addItem = (product) => {
    const existing = items.value.find(item => item.id === product.id)
    if (existing) {
      existing.quantity += product.quantity || 1
    } else {
      items.value.push({
        ...product,
        quantity: product.quantity || 1
      })
    }
    persist()
  }

  const updateQuantity = (productId, quantity) => {
    const item = items.value.find(item => item.id === productId)
    if (item) {
      if (quantity <= 0) {
        removeItem(productId)
      } else {
        item.quantity = quantity
        persist()
      }
    }
  }

  const removeItem = (productId) => {
    items.value = items.value.filter(item => item.id !== productId)
    selectedIds.value = selectedIds.value.filter(id => id !== productId)
    persist()
  }

  const toggleSelection = (productId) => {
    const index = selectedIds.value.indexOf(productId)
    if (index > -1) {
      selectedIds.value.splice(index, 1)
    } else {
      selectedIds.value.push(productId)
    }
    persist()
  }

  // 初始化
  initFromStorage()

  return {
    // State
    items,
    selectedIds,
    // Getters
    itemCount,
    totalPrice,
    selectedItems,
    selectedTotalPrice,
    // Actions
    addItem,
    updateQuantity,
    removeItem,
    toggleSelection
  }
})
  

  <!-- 商品详情页：ProductDetail.vue -->
<template>
  <div class="product-detail">
    <h2>{{ product.name }}</h2>
    <p class="price">¥{{ product.price }}</p>
    <button @click="addToCart">加入购物车</button>
  </div>
</template>

<script setup>
import { useCartStore } from '@/stores/cart'

const props = defineProps({
  product: Object
})

const cart = useCartStore()

const addToCart = () => {
  cart.addItem({
    id: props.product.id,
    name: props.product.name,
    price: props.product.price
  })
}
</script>
  

  <!-- 头部导航：Header.vue -->
<template>
  <header class="header">
    <div class="logo">我的商店</div>
    <nav>
      <!-- TODO: RouterLink to="/" START -->首页<!-- TODO: RouterLink END -->
      <!-- TODO: RouterLink to="/cart" START -->
        购物车 ({{ cart.itemCount }})
      <!-- TODO: RouterLink END -->
    </nav>
  </header>
</template>

<script setup>
import { useCartStore } from '@/stores/cart'

const cart = useCartStore()  // 直接使用，自动响应变化
</script>
  

  // ❌ 直接修改 props
props.user.name = '李四'

// ❌ 直接修改 Vuex 的 state
store.state.user.name = '李四'

// ❌ 直接修改数组元素
state.items[0].name = '新名称'
  

  // ✅ Vue 3 / Pinia：直接修改顶层属性
store.user.name = '李四'  // Pinia 会自动处理响应式

// ✅ Vue 2 / Vuex：通过 mutation
mutations: {
  UPDATE_USER_NAME(state, newName) {
    state.user.name = newName
  }
}

// ✅ 修改数组：创建新数组
state.items = state.items.map((item, index) =>
  index === 0 ? { ...item, name: '新名称' } : item
)
  

  // ❌ 在 getter 中修改状态
getters: {
  doubleCount(state) {
    state.count *= 2  // 副作用！
    return state.count
  }
}
  

  // ✅ Getter 只计算，不修改
getters: {
  doubleCount(state) {
    return state.count * 2
  }
}

// ✅ 如果需要修改，用 action
actions: {
  doubleCountAndSave({ commit }) {
    commit('SET_DOUBLE_COUNT')
  }
}
  

  // ❌ 忘记取消订阅
export default {
  created() {
    EventBus.$on('cart-updated', this.handleCartUpdate)
  }
  // 组件销毁了，但监听还在！
}
  

  // ✅ 及时取消订阅
export default {
  created() {
    EventBus.$on('cart-updated', this.handleCartUpdate)
  },
  beforeUnmount() {  // Vue 3 用 beforeUnmount，Vue 2 用 beforeDestroy
    EventBus.$off('cart-updated', this.handleCartUpdate)
  }
}
  

  // ❌ 把所有状态都放进 store
const store = useStore()
store.inputValue = '用户输入'
store.isModalOpen = true
store.currentTab = 'profile'
  

  // ✅ 局部状态用组件内部管理
const inputValue = ref('')

// ✅ 只有需要共享的状态才放 store
const userInfo = useUserStore()  // 多个组件需要用户信息
const cart = useCartStore()  // 多个组件需要购物车数据