Vue3 状态管理 Pinia 入门指南

yarn add pinia
# 或
npm install pinia

// main.ts
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const pinia = createPinia()
const app = createApp(App)

app.use(pinia)
app.mount('#app')

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

export const useCounterStore = defineStore('counter', {
  // 状态（数据）
  state: () => ({
    count: 0,
    name: '我的计数器',
  }),
  // 计算属性（派生数据）
  getters: {
    // 使用箭头函数时，state 为第一个参数
    doubleCount: (state) => state.count * 2,
    // 需要访问其他 getter 时，使用普通函数
    doubleCountPlusOne(): number {
      return this.doubleCount + 1
    },
  },
  // 操作方法（业务逻辑）
  actions: {
    increment() {
      this.count++
    },
    decrement() {
      this.count--
    },
    // 支持异步操作
    async incrementAsync() {
      await new Promise((resolve) => setTimeout(resolve, 1000))
      this.increment()
    },
    incrementBy(amount: number) {
      this.count += amount
    },
  },
})

// stores/user.ts
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'
import { api } from '@/services/api' // 假设的 API 服务

// 类型定义
interface User {
  id: number
  name: string
  email: string
}
interface LoginCredentials {
  username: string
  password: string
}

export const useUserStore = defineStore('user', () => {
  // 状态（类似 options 的 data）
  const user = ref<User | null>(null)
  const isLoggedIn = ref(false)

  // 计算属性（类似 options 的 getters）
  const userName = computed(() => user.value?.name || '游客')
  const userId = computed(() => user.value?.id || 0)

  // 操作方法（类似 options 的 actions）
  function login(credentials: LoginCredentials) {
    return api.login(credentials).then((response) => {
      user.value = response.user
      isLoggedIn.value = true
      return response
    })
  }

  function logout() {
    user.value = null
    isLoggedIn.value = false
  }

  async function fetchUserProfile() {
    if (!userId.value) return
    try {
      const profile = await api.getUserProfile(userId.value)
      user.value = { ...user.value, ...profile }
    } catch (error) {
      console.error('获取用户资料失败:', error)
    }
  }

  // 返回需要暴露给外部的所有内容
  return { user, isLoggedIn, userName, userId, login, logout, fetchUserProfile }
})

<template>
  <div>
    <h1>{{ counterStore.name }}</h1>
    <p>计数: {{ counterStore.count }}</p>
    <p>双倍计数: {{ counterStore.doubleCount }}</p>
    <p>用户名: {{ userStore.userName }}</p>

    <button @click="counterStore.increment()">增加</button>
    <button @click="counterStore.decrement()">减少</button>
    <button @click="counterStore.incrementBy(5)">增加5</button>
    <button @click="counterStore.incrementAsync()">异步增加</button>

    <button @click="login" v-if="!userStore.isLoggedIn">登录</button>
    <button @click="userStore.logout()" v-else>退出</button>
  </div>
</template>

<script lang="ts" setup>
import { watch } from 'vue'
import { useCounterStore } from '@/stores/counter'
import { useUserStore } from '@/stores/user'
import { storeToRefs } from 'pinia'

const counterStore = useCounterStore()
const userStore = useUserStore()

// 关键：使用 storeToRefs 保持解构后的响应性
const { count, doubleCount } = storeToRefs(counterStore)
const { userName, isLoggedIn } = storeToRefs(userStore)

// 直接调用 action（action 本身就是方法，无需解构）
const login = () => {
  userStore
    .login({ username: 'admin', password: 'password' })
    .then(() => {
      console.log('登录成功')
    })
    .catch((error) => {
      console.error('登录失败:', error)
    })
}

// 监听 Store 状态变化
watch(
  () => counterStore.count,
  (newCount, oldCount) => {
    console.log(`计数从 ${oldCount} 变为 ${newCount}`)
  }
)
</script>