Vue3推荐的状态管理库Pinia 2分钟学会

Pinia 是 Vue3 推荐的状态管理库，主要作用是聚焦管理多个组件共享的数据（列如用户信息、购物车数据等），让组件间的数据传递和修改更简单。

简单用法（3 步）：

1. 安装：

通过包管理工具安装，列如

npm install pinia

2. 创建 Store：

用 defineStore 定义一个存储数据的 “仓库”，里面包含：

示例：

import { defineStore } from 'pinia'
// 定义一个名为"user"的store
export const useUserStore = defineStore('user', {
    state: () => ({ name: '张三', age: 20 }),
    actions: {
        setAge(newAge) {
            this.age = newAge // 直接修改state
        }
    },
    getters: {
        doubleAge: (state) => state.age * 2
    }
})

• state：存储数据（类似组件的 data）
• actions：修改数据的方法（直接改，不用像 Vuex 那样写 mutations）
• getters：计算属性（类似组件的 computed）

3. 在组件中使用：

导入创建的 store，直接获取数据或调用方法：

import { useUserStore } from './stores/user'
import { storeToRefs } from 'pinia' // 用于获取响应式数据
const userStore = useUserStore()
const { name, age } = storeToRefs(userStore) // 解构响应式数据
userStore.setAge(25) // 调用方法修改数据
console.log(userStore.doubleAge) // 访问getter

简单说：
Pinia 就是个 “公共数据仓库”，方便多个组件存、取、改数据，比旧的 Vuex 更简单直观。