当前位置：首页 > news >正文

小白学Pinia状态管理

news 来源：原创 2025/6/14 8:04:46

1. 什么是 Pinia？

2. 为什么需要 Pinia？

3. Pinia 的三个核心概念

State（状态）- 存储数据

Getters（计算属性）- 处理数据

Actions（方法）- 修改数据

4. 创建一个简单的 Store

5. 在组件中使用 Store

6. 再来一个示例

7. 在组件中的使用示例

8. Pinia 的优势

9. 常见使用场景

10. 学习建议

1. 什么是 Pinia？

Pinia 就像一个全局的数据仓库，让不同的 Vue 组件能够共享数据。

比喻：想象一个图书馆（Pinia），所有人（Vue组件）都可以去借书（读取数据）、还书（修改数据）。

2. 为什么需要 Pinia？

问题场景：

// 组件A需要用户信息
const userInfo = { name: '张三', age: 25 }// 组件B也需要这个用户信息
// 组件C也需要这个用户信息
// 怎么在这些组件之间共享数据？

解决方案：用 Pinia 存储全局数据，所有组件都能访问。

3. Pinia 的三个核心概念

State（状态）- 存储数据

state: () => ({currentType: 'type1',  // 当前机器类型userInfo: null,        // 用户信息count: 0              // 计数器
})

理解：State 就是存放数据的地方，类似于组件的 data。

Getters（计算属性）- 处理数据

getters: {// 根据当前类型获取配置currentConfig: (state) => {return state.machineConfig[state.currentType]},// 判断是否是成年人isAdult: (state) => {return state.userInfo?.age >= 18}
}

理解：Getters 就像计算属性，基于 state 计算出新的值。

Actions（方法）- 修改数据

actions: {// 设置机器类型setMachineType(type) {this.currentType = type},// 设置用户信息setUserInfo(info) {this.userInfo = info}
}

理解：Actions 就是修改 state 的方法，类似于组件的 methods。

4. 创建一个简单的 Store

让我们创建一个用户信息的 Store：

// store/user.js
import { defineStore } from 'pinia'export const useUserStore = defineStore('user', {// 1. State - 存储数据state: () => ({name: '',age: 0,isLogin: false}),// 2. Getters - 计算属性getters: {// 获取用户显示名称displayName: (state) => {return state.name || '游客'},// 判断是否成年isAdult: (state) => {return state.age >= 18}},// 3. Actions - 修改数据的方法actions: {// 登录login(name, age) {this.name = namethis.age = agethis.isLogin = true},// 登出logout() {this.name = ''this.age = 0this.isLogin = false}}
})

5. 在组件中使用 Store

<!-- UserProfile.vue -->
<template><div><h1>用户信息</h1><p>姓名：{{ userStore.displayName }}</p><p>年龄：{{ userStore.age }}</p><p>状态：{{ userStore.isLogin ? '已登录' : '未登录' }}</p><p>{{ userStore.isAdult ? '成年人' : '未成年人' }}</p><button @click="handleLogin">登录</button><button @click="handleLogout">登出</button></div>
</template><script setup>
import { useUserStore } from '@/store/user'// 获取 store 实例
const userStore = useUserStore()// 登录方法
const handleLogin = () => {userStore.login('张三', 25)
}// 登出方法
const handleLogout = () => {userStore.logout()
}
</script>

6. 再来一个示例

创建一个机型配置 Store：

export const useMachineStore = defineStore('machine', {// 存储机器相关数据state: () => ({currentType: 'type1',  // 当前机器类型machineConfig: {       // 机器配置信息type1: { name: '无打印', features: ['query', 'payment'] },type2: { name: '报告打印', features: ['query', 'payment', 'reportPrint'] },type3: { name: '发票打印', features: ['query', 'payment', 'invoicePrint'] }}}),// 基于数据计算新值getters: {// 获取当前机器配置currentConfig: (state) => {return state.machineConfig[state.currentType]},// 检查是否支持某功能hasFeature: (state) => {return (feature) => {const config = state.machineConfig[state.currentType]return config.features.includes(feature)}}},// 修改数据的方法actions: {// 切换机器类型setMachineType(type) {this.currentType = type}}
})

7. 在组件中的使用示例

<!-- MachineInfo.vue -->
<template><div><h2>{{ machineStore.currentConfig.name }}</h2><p>支持的功能：</p><ul><li v-if="machineStore.hasFeature('query')">查询功能</li><li v-if="machineStore.hasFeature('payment')">缴费功能</li><li v-if="machineStore.hasFeature('reportPrint')">报告打印</li></ul><button @click="switchMachine">切换机器类型</button></div>
</template><script setup>
import { useMachineStore } from '@/store/machine'const machineStore = useMachineStore()const switchMachine = () => {// 切换到下一个类型const types = ['type1', 'type2', 'type3']const currentIndex = types.indexOf(machineStore.currentType)const nextIndex = (currentIndex + 1) % types.lengthmachineStore.setMachineType(types[nextIndex])
}
</script>