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', {
  // 狀態(tài)（數(shù)據(jù)）
  state: () => ({
    count: 0,
    name: '我的計(jì)數(shù)器',
  }),
  // 計(jì)算屬性（派生數(shù)據(jù)）
  getters: {
    // 使用箭頭函數(shù)時(shí)，state 為第一個(gè)參數(shù)
    doubleCount: (state) => state.count * 2,
    // 需要訪問(wèn)其他 getter 時(shí)，使用普通函數(shù)
    doubleCountPlusOne(): number {
      return this.doubleCount + 1
    },
  },
  // 操作方法（業(yè)務(wù)邏輯）
  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' // 假設(shè)的 API 服務(wù)

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

export const useUserStore = defineStore('user', () => {
  // 狀態(tài)（類似 options 的 data）
  const user = ref<User | null>(null)
  const isLoggedIn = ref(false)

  // 計(jì)算屬性（類似 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)
    }
  }

  // 返回需要暴露給外部的所有內(nèi)容
  return { user, isLoggedIn, userName, userId, login, logout, fetchUserProfile }
})

<template>
  <div>
    <h1>{{ counterStore.name }}</h1>
    <p>計(jì)數(shù): {{ counterStore.count }}</p>
    <p>雙倍計(jì)數(shù): {{ 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()

// 關(guān)鍵：使用 storeToRefs 保持解構(gòu)后的響應(yīng)性
const { count, doubleCount } = storeToRefs(counterStore)
const { userName, isLoggedIn } = storeToRefs(userStore)

// 直接調(diào)用 action（action 本身就是方法，無(wú)需解構(gòu)）
const login = () => {
  userStore
    .login({ username: 'admin', password: 'password' })
    .then(() => {
      console.log('登錄成功')
    })
    .catch((error) => {
      console.error('登錄失敗:', error)
    })
}

// 監(jiān)聽(tīng) Store 狀態(tài)變化
watch(
  () => counterStore.count,
  (newCount, oldCount) => {
    console.log(`計(jì)數(shù)從 ${oldCount} 變?yōu)?${newCount}`)
  }
)
</script>