Vue 3 状态管理终极指南：从入门到精通 Pinia

# 使用 npm 或 yarn 安装
npm install pinia
# yarn add pinia

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

const app = createApp(App)

// 创建 Pinia 实例并挂载
app.use(createPinia())

app.mount('#app')

import { defineStore } from 'pinia'

// 使用 defineStore 定义一个 store
// 第一个参数是 store 的唯一 ID，Pinia 用它来连接 DevTools
export const useCounterStore = defineStore('counter', {
  // state: 定义状态的地方，必须是函数形式以避免服务端渲染的交叉请求污染
  state: () => ({
    count: 0,
    name: 'Pinia'
  }),
  
  // getters: 类似计算属性
  getters: {
    // 接收 state 作为第一个参数
    doubleCount: (state) => state.count * 2,
    
    // 也可以通过 this 访问 store 实例的其他属性，但需要显式定义返回类型
    greeting(): string {
      return `Hello, ${this.name}! My double count is ${this.doubleCount}.`
    }
  },
  
  // actions: 类似方法
  actions: {
    increment() {
      // 在 action 中可以直接通过 this 修改 state
      this.count++
    },
    async incrementAsync() {
      // 支持异步操作
      await new Promise(resolve => setTimeout(resolve, 1000))
      this.increment() // 可以直接调用其他 action
    }
  }
})

<template>
  <div>
    <p>Count: {{ counterStore.count }}</p>
    <p>Double Count: {{ counterStore.doubleCount }}</p>
    <p>{{ counterStore.greeting }}</p>
    <button @click="counterStore.increment">Increment</button>
    <button @click="counterStore.incrementAsync">Increment Async</button>
  </div>
</template>

<script setup lang="ts">
import { useCounterStore } from './stores/counter'

// 在 setup 中调用 useStore() 函数即可获取 store 实例
const counterStore = useCounterStore()
</script>

// 方式1：最直接的修改
counterStore.count++

// 方式2：通过 action（推荐，便于逻辑封装）
counterStore.increment()

// 方式3：使用 $patch 批量修改（对象形式，性能更优）
counterStore.$patch({
  count: counterStore.count + 2,
  name: 'New Name'
})

// 方式4：使用 $patch 批量修改（函数形式，适用于复杂逻辑）
counterStore.$patch((state) => {
  state.count += 3
  state.name = 'Updated Name'
})

npm install pinia-plugin-persistedstate

import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate) // 注册插件
// ... app.use(pinia)

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  // 开启持久化，默认存储在 localStorage
  persist: true
})

// stores/user.ts
import { defineStore } from 'pinia'
import { useCounterStore } from './counter' // 直接引入 counter store

export const useUserStore = defineStore('user', {
  actions: {
    login() {
      console.log('User logged in!')
      // 获取 counter store 实例并调用它的 action
      const counterStore = useCounterStore()
      counterStore.increment()
    }
  }
})