Vue.js: Pinia 状态管理

// ❌ 翻车版：5 个组件 5 份数据
// CartIcon.vue
const cartCount = ref(0)

// ProductCard.vue
const localCart = ref([])

// CartPage.vue
const cart = ref({ items: [], total: 0 })

// CheckoutPage.vue
const myCart = ref([])

// Header.vue
const cartItems = ref([])

// stores/cart.js
import { defineStore } from 'pinia'

export const useCartStore = defineStore('cart', {
  state: () => ({
    items: [],
    total: 0
  }),
  getters: {
    itemCount: (state) => state.items.length,
    totalPrice: (state) => state.items.reduce((sum, i) => sum + i.price, 0)
  },
  actions: {
    addItem(product) {
      this.items.push(product)
      this.total += product.price
    },
    removeItem(id) {
      this.items = this.items.filter(i => i.id !== id)
    }
  }
})

<!-- CartIcon.vue -->
<script setup>
import { useCartStore } from '@/stores/cart'
const cart = useCartStore()
// 自动响应：cart.itemCount 变了，icon 立即更新
</script>
<template>
  <span>🛒 {{ cart.itemCount }}</span>
</template>

<!-- ProductCard.vue -->
<script setup>
import { useCartStore } from '@/stores/cart'
const cart = useCartStore()
</script>
<template>
  <button @click="cart.addItem(product)">Add to Cart</button>
</template>

// stores/counter.js
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  // state：数据
  state: () => ({
    count: 0,
    name: 'Counter'
  }),
  
  // getters：派生值（类似 computed）
  getters: {
    doubleCount: (state) => state.count * 2,
    isZero: (state) => state.count === 0
  },
  
  // actions：方法（类似 methods）
  actions: {
    increment() {
      this.count++
    },
    async fetchData() {
      const res = await fetch('/api/count')
      this.count = await res.json()
    }
  }
})

// stores/auth.js
import { defineStore } from 'pinia'
const { ref, computed } = Vue

export const useAuthStore = defineStore('auth', () => {
  // 1. state（用 ref）
  const user = ref(null)
  const token = ref(localStorage.getItem('token') || '')
  
  // 2. getters（用 computed）
  const isLoggedIn = computed(() => !!token.value)
  const userName = computed(() => user.value?.name || 'Guest')
  
  // 3. actions（普通函数）
  function login(credentials) {
    // API call...
    user.value = { name: 'Alice' }
    token.value = 'xxx'
  }
  
  function logout() {
    user.value = null
    token.value = ''
  }
  
  return { user, token, isLoggedIn, userName, login, logout }
})

根组件面板显示「count: 0 | doubleCount: 0 | isZero: true」，子组件面板显示「count: 0 | doubleCount: 0」。
点根组件「+1」两次，两处同时变成 count: 2、doubleCount: 4，isZero 变为 false。
点子组件「子组件 +1」后根组件同步到 count: 3、doubleCount: 6；点「reset」两处一起归零，isZero 回到 true。

// Options 风格
state: () => ({
  count: 0,
  user: null,
  items: []
})

// Setup 风格
const count = ref(0)
const user = ref(null)
const items = ref([])

// Options 风格
getters: {
  // 简单 getter
  doubleCount: (state) => state.count * 2,
  
  // 访问其他 getter（用 this）
  ratio(state) {
    return this.doubleCount / 100
  },
  
  // 返回函数（参数化 getter）
  getItemById: (state) => (id) => {
    return state.items.find(i => i.id === id)
  }
}

// Setup 风格
const doubleCount = computed(() => count.value * 2)
const getItemById = (id) => items.value.find(i => i.id === id)

// Options 风格
actions: {
  // 同步
  increment() {
    this.count++
  },
  
  // 异步
  async fetchData() {
    const res = await fetch('/api/data')
    this.data = await res.json()
  },
  
  // 访问其他 actions
  async loginAndFetch(credentials) {
    await this.login(credentials)
    await this.fetchUser()
  }
}

// Setup 风格
function increment() {
  count.value++
}
async function fetchData() {
  const res = await fetch('/api/data')
  data.value = await res.json()
}

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

const cart = useCartStore()

// 1. 直接访问 state（响应式）
console.log(cart.items)

// 2. 用 storeToRefs 解构（保持响应式）
const { items, total } = storeToRefs(cart)

// 3. 调用 action
cart.addItem(product)

// 4. 监听 state 变化
watch(() => cart.items, (newItems) => {
  console.log('Cart changed:', newItems)
})
</script>

// ⚠️ 注意 1：解构 state 丢失响应式
const { items } = cart  // ❌ items 是普通值
const { items } = storeToRefs(cart)  // ✅ items 是 ref

// ⚠️ 注意 2：修改 state 必须用 action
cart.items.push(...)  // ❌ 不推荐（直接修改）
cart.addItem(...)     // ✅ 用 action

// ⚠️ 注意 3：action 内的 this 指向 store
actions: {
  increment() {
    this.count++  // ✅ this = store
  }
}

// ⚠️ 注意 4：getter 缓存
getters: {
  doubleCount() {
    console.log('recomputed')  // 只在依赖变化时打印
    return this.count * 2
  }
}

// ⚠️ 注意 5：useStore 在 setup 外使用要传 pinia 实例
import { getActivePinia } from 'pinia'
const cart = useCartStore(getActivePinia())  // 在 .js 文件中

npm install pinia-plugin-persistedstate

// stores/cart.js
export const useCartStore = defineStore('cart', () => {
  const items = ref([])
  
  return { items }
}, {
  // 1. 默认：localStorage key 为 'cart'
  persist: true,
  
  // 2. 自定义 key
  persist: {
    key: 'my-cart',
    storage: localStorage
  },
  
  // 3. 只持久化部分 state
  persist: {
    paths: ['items']  // 只保存 items，不保存 total
  },
  
  // 4. sessionStorage（关闭浏览器就清除）
  persist: {
    storage: sessionStorage
  },
  
  // 5. 自定义序列化（加密等）
  persist: {
    serializer: {
      serialize: (value) => btoa(JSON.stringify(value)),
      deserialize: (value) => JSON.parse(atob(value))
    }
  }
})

首次打开显示「主题：light | 购物车：0 件」，下方 localStorage 内容为 (空)，子组件徽章是 0。
点「切换主题」→ 主题变 dark；点「加入一件商品」两次 → 购物车 2 件、子组件徽章同步为 2。
localStorage 内容实时变成 {"theme":"dark","items":[{"id":1766...},{"id":1766...}]}。
刷新页面：主题仍是 dark、购物车仍是 2 件（启动时从缓存恢复）；点「清空购物车」后 items 变空数组。

页面顶部说明文字下依次出现 3 个面板：计数器组件 A、计数器组件 B 和购物车。
两个计数器初始都显示「count: 0 | double: 0」；点 A 的 +1 后两处同时变为 1 / 2，点 B 的 +1 也会同步到 A。
购物车初始显示「items: 0 件, total: $0」；点「加 1 件 iPhone」变为 1 件、$999，再点变 2 件、$1998；点「清空」归零。