Vue3-Day6

1. Pinia概述

• 简介
  • Pinia 是 Vue 官方新一代状态管理库，现已正式替代 Vuex 成为 Vue3 标准全局状态管理方案。
• 作用
  • 存放全局共享数据的工具
• 三层核心结构
  • State：全局响应式数据源，等同于组件data，存储共享原始数据，可直接修改或通过$patch批量更新。
  • Getters：派生计算状态，等同于组件computed，基于 state 做数据加工、缓存，自动缓存依赖。
  • Actions：业务逻辑方法，等同于组件methods；同步、异步操作统一放在 Actions，可发请求、修改 state、跨 Store 调用，DevTools 可完整追踪操作记录。
• 常用场景
  • 登录后的用户信息、购物车商品，所有页面都要用，不用来回传值，统一存在这里管理。

2. 快速入门

1. 安装npm install pinia
2. 定义store：/stores/counter.ts

import{defineStore}from'pinia'import{ref,computed}from'vue'// StoreexportconstuseCounterStore=defineStore('counter',()=>{// 组合式写法 State 可以有多个constcount=ref(0);// GetterconstdoubleCount=computed(()=>count.value*2);// Action// 箭头函数写法constadd=()=>{count.value++;}// 普通函数写法functionreset(){count.value=0;}// 必须暴露出去，才能使用return{count,doubleCount,add,reset};})

3. 组件中使用

<template><div><p>数值：{{counter.count}}</p><p>两倍数值：{{counter.doubleCount}}</p><button@click="counter.add">+1</button><button@click="counter.reset">重置</button></div></template><script setup>// 引入需要的Storeimport{useCounterStore}from'@/stores/counter'// 获取Store实例constcounter=useCounterStore()</script>

3. 学习总结

1. Pinia的三大核心结构、且可以用来替代VueX管理全局数据。
2. 使用步骤：npm安装、创建仓库store（state、action、getter最后return暴露出来）、在组件中引用并使用