# Vue3教程 - 17 Pinia
之前学了父子组件之间传递数据，通过 属性及回调函数的形式来传递。但是如果涉及到多级组件嵌套，各个组件之间传递数据会非常麻烦。尤其是遇到没有父子关系的组件，在其间传递数据会更麻烦。
Pinia 就是为了保存组件之间的共享数据，如果组件之间有要共享的数据，可以把数据保存到 Pinia 中，Pinia 就是提供一个全局的共享数据存储区域，相当于一个数据仓库，各个组件都可以从中读取和修改数据。
在 Vue2 中我们使用 Vuex 做状态管理，在 Vue3 中使用 Pinia。
# 17.1 搭建Pinia
# 1 安装Pinia
# npm方式安装
npm install pinia
# yarn方式安装
yarn add pinia
1
2
3
4
5
2
3
4
5
# 2 挂载数据存储对象
在项目的 main.ts 中引入 pinia 并挂载到Vue实例上。
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
// 1.引入pinia
import { createPinia } from 'pinia'
const app = createApp(App)
// 2.创建pinia
const pinia = createPinia()
// 3. 安装pinia
app.use(pinia)
// 安装路由
app.use(router)
app.mount('#app')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
下面演示一下 Pinia 的使用。
# 17.2 使用Pinia
下面通过一个样例来学习 Pinia 的运用。
内容未完......