Vue3状态管理Pinia

1 Pinia介绍

如何实现多个组件之间的数据传递?

• 方式1 组件传参

• 方式2 路由传参

• 方式3 通过pinia状态管理定义共享数据

当我们有多个组件共享一个共同的状态(数据源)时，多个视图可能都依赖于同一份状态。来自不同视图的交互也可能需要更改同一份状态。虽然我们的手动状态管理解决方案（props,组件间通信,模块化）在简单的场景中已经足够了，但是在大规模的生产应用中还有很多其他事项需要考虑：

• 更强的团队协作约定
• 与 Vue DevTools 集成，包括时间轴、组件内部审查和时间旅行调试
• 模块热更新 (HMR)
• 服务端渲染支持

Pinia 就是一个实现了上述需求的状态管理库，由 Vue 核心团队维护，对 Vue 2 和 Vue 3 都可用。https://pinia.vuejs.org/zh/introduction.html

2 Pinia基本用法

1 准备vite项目

npm create vite
npm install 
npm install vue-router@4 --save

2 安装pinia

npm install pinia

3 定义pinia store对象 src/store/store.js [推荐这么命名不是强制]

import {
   defineStore } from 'pinia'

//定义数据并且对外暴露
// store就是定义共享状态的包装对象
// 内部包含四个属性： id 唯一标识 state 完整类型推理，推荐使用箭头函数 存放的数据 getters 类似属性计算，存储放对数据
// 操作的方法  actions 存储数据的复杂业务逻辑方法
// 理解： store类似Java中的实体类， id就是类名， state 就是装数据值的属性  getters就是get方法，actions就是对数据操作的其他方法
export const definedPerson = defineStore(
    {
   
        id: 'personPinia', //必须唯一
        state:()=>{
    // state中用于定义数据
            return {
   
                username:'张三',
                age:0,
                hobbies:['唱歌','跳舞']
            }
        },
        getters:{
   // 用于定义一些通过数据计算而得到结果的一些方法 一般在此处不做对数据的修改操作
                 // getters中的方法可以当做属性值方式使用
            getHobbiesCount(){
   
                return this.hobbies.length
            },
            getAge(){
   
                return this.age
            }
        },
        actions:{
    // 用于定义一些对数据修改的方法
            doubleAge(){
   
                this.age=this.age*2
            }
        }
    }
)

4 在main.js配置pinia组件到vue中

import {
    createApp } from 'vue'
import App from './App.vue'
import router from './routers/router.js'
// 导pinia
import {
    createPinia } from 'pinia'
// 创建pinia对象
let pinia= createPinia()

let app =createApp(App)
app.use(router)
// app中使用pinia功能
app.use(pinia) 
app.mount('#app')

5 Operate.vue 中操作Pinia数据

<script setup type="module">
    import {
      ref} from 'vue';
    import {
      definedPerson} from '../store/store';
    // 读取存储的数据
    let person= definedPerson()

    let hobby = ref('')
   
</script>

<template>
    <div>
        <h1>operate视图,用户操作Pinia中的数据</h1>
        请输入姓名:<input type