VUE3：深入浅出探究pinia、provide\inject在多层组件页面是怎么使用的

1. Pinia 状态管理

什么是 Pinia？

Pinia是 Vue 3 官方推荐的状态管理库，可以理解为一个"全局数据仓库"。

为什么需要它？想象一下，你有一个购物车数据，需要在多个页面（首页、商品页、结算页）共享。如果用 props 一层层传递会很麻烦，Pinia 就是解决这个问题的。

安装 Pinia

npm install pinia

使用步骤

第一步：在 main.js 中注册 Pinia

// main.js import { createApp } from 'vue' import { createPinia } from 'pinia' import App from './App.vue' const app = createApp(App) const pinia = createPinia() app.use(pinia) app.mount('#app')

第二步：创建 Store（数据仓库）

// src/stores/counter.js import { defineStore } from 'pinia' import { ref, computed } from 'vue' // defineStore 第一个参数是 store 的唯一标识（名字） export const useCounterStore = defineStore('counter', () => { // ========== state（数据）========== // 就像组件中的 ref，存放响应式数据 const count = ref(0) const name = ref('小明') // ========== getters（计算属性）========== // 就像组件中的 computed const doubleCount = computed(() => count.value * 2) // ========== actions（方法）========== // 修改数据的方法 function increment() { count.value++ } function decrement() { count.value-- } // 异步操作也可以放在 actions 中 async function asyncIncrement() { // 模拟接口请求 await new Promise(resolve => setTimeout(resolve, 1000)) count.value++ } // 必须 return 出去才能在组件中使用 return { count, name, doubleCount, increment, decrement, asyncIncrement } })

第三步：在组件中使用 Store

爷爷组件 (GrandParent.vue)

<template> <div class="grandparent"> <h2>👴 爷爷组件</h2> <p>从 Pinia 获取的 count: {{ counterStore.count }}</p> <p>双倍 count: {{ counterStore.doubleCount }}</p> <button @click="counterStore.increment">爷爷点击 +1</button> <!-- 嵌套父组件 --> <ParentComponent /> </div> </template> <script setup> import { useCounterStore } from '@/stores/counter' import ParentComponent from './ParentComponent.vue' // 获取 store 实例，直接使用即可 const counterStore = useCounterStore() </script>

父组件 (ParentComponent.vue)

<template> <div class="parent"> <h3>👨 父组件</h3> <p>从 Pinia 获取的 count: {{ counterStore.count }}</p> <button @click="counterStore.decrement">父亲点击 -1</button> <!-- 嵌套子组件 --> <ChildComponent /> </div> </template> <script setup> import { useCounterStore } from '@/stores/counter' import ChildComponent from './ChildComponent.vue' // 任何组件都可以直接获取同一个 store const counterStore = useCounterStore() </script>

孙子组件 (ChildComponent.vue)

<template> <div class="child"> <h4>👶 孙子组件</h4> <p>从 Pinia 获取的 count: {{ counterStore.count }}</p> <button @click="counterStore.asyncIncrement">孙子异步 +1（1秒后）</button> </div> </template> <script setup> import { useCounterStore } from '@/stores/counter' // 三层组件都能访问同一份数据！ const counterStore = useCounterStore() </script>

Pinia 小结

2. Provide / Inject 依赖注入

什么是 Provide / Inject？

这是 Vue 内置的"跨层级传值"方案，不需要安装额外的库。

• provide（提供）：祖先组件提供数据
• inject（注入）：后代组件接收数据

与 Pinia 的区别：Provide/Inject 的数据是"局部的"，只在当前组件树内共享；而 Pinia 是"全局的"。

基本使用

爷爷组件（提供数据）

<template> <div class="grandparent"> <h2>👴 爷爷组件 - Provide 示例</h2> <p>爷爷的消息: {{ message }}</p> <p>爷爷的主题色: {{ theme }}</p> <button @click="changeTheme">切换主题</button> <ParentProvide /> </div> </template> <script setup> import { ref, provide } from 'vue' import ParentProvide from './ParentProvide.vue' // ========== 定义要共享的数据 ========== const message = ref('来自爷爷的问候~') const theme = ref('light') // 切换主题的方法 const changeTheme = () => { theme.value = theme.value === 'light' ? 'dark' : 'light' } // ========== 使用 provide 提供数据 ========== // provide(key, value) // key: 字符串或 Symbol，用于标识 // value: 要共享的数据 // 提供普通数据 provide('message', message) // 提供响应式数据（子组件能感知变化） provide('theme', theme) // 提供方法（让子组件也能修改数据） provide('changeTheme', changeTheme) // 提供对象（包含多个相关数据） provide('userInfo', { name: '张三', age: 60, role: 'grandparent' }) </script>

父组件（中间层，不需要处理）

<template> <div class="parent"> <h3>👨 父组件</h3> <p>我是中间层，不需要 inject，数据可以跳过我直接传给孙子</p> <ChildInject /> </div> </template> <script setup> import ChildInject from './ChildInject.vue' // 注意：父组件不需要做任何事，数据会"穿透"过去 </script>

孙子组件（注入数据）

<template> <div class="child" :class="theme"> <h4>👶 孙子组件 - Inject 示例</h4> <!-- 使用注入的数据 --> <p>收到爷爷的消息: {{ message }}</p> <p>当前主题: {{ theme }}</p> <p>用户信息: {{ userInfo.name }}, {{ userInfo.age }}岁</p> <!-- 调用爷爷提供的方法 --> <button @click="changeTheme">孙子也能切换主题</button> </div> </template> <script setup> import { inject } from 'vue' // ========== 使用 inject 接收数据 ========== // inject(key) 或 inject(key, 默认值) // 接收响应式数据 const message = inject('message') const theme = inject('theme') // 接收方法 const changeTheme = inject('changeTheme') // 接收对象 const userInfo = inject('userInfo') // 设置默认值（如果祖先没有 provide，就用默认值） const notExist = inject('notExist', '这是默认值') </script> <style scoped> .light { background: #fff; color: #333; } .dark { background: #333; color: #fff; } </style>

Provide / Inject 小结