【前端之Vue3状态管理Pinia】

多个组件之间的数据传递方式

① 组件传递；组件就是实现应用中局部功能代码和资源的集合！
可以分为父子传参（组件之间必须拥有父子关系）、兄弟传参（必须拥有相同的父组件）
② 路由传参； 组件之间必须使用路由，经过路由跳转才能实现；
③ 通过pinia状态管理定义共享数据；（数据无法进行持久化，如果需要持久化，需结合sessionStorage和localStorage来进行持久化）

Pinia介绍

Pinia介绍
Pinia是一种Vue.js状态管理库，多个组件共享一个共同的状态(数据源)时，多个视图可能都依赖于同一份状态。来自不同视图的交互也可能需要更改同一份状态,此时就可以通过pinia状态管理定义共享数据！Pinia 由 Vue 核心团队维护，对 Vue 2 和 Vue 3 都可用。

Pinia基本用法【以VScode工具展示】

1、准备vite项目

#创建项目
npm create vite

#安装依赖
npm install 或 npm i

#安装路由
npm install vue-router@4 --save或npm install vue-router

#安装pinia
npm install pinia

图片参考：

2、定义pinia store对象 src/store/store.js

/* 定义共享的pinia数据 */
import {
    defineStore } from "pinia";

//定义一个Person对象共享
//对外单独暴露 definePerson 外部使用时也要使用单独导入的语法
export const definePerson = defineStore(
  //属性
  {
   
    id: "personPinia", //当前数据的id，必须全局唯一（也就是在当前demo中其他store的js文件id值不能与之重复）
    state: () => {
   
      return {
   
        username: "zhangsan",
        age: 18,
        hobbies: ["唱", "跳", "rap", "篮球"],
      };
    }, //状态，其实就是响应式数据
    getters: {
   
      //专门定义一个获取数据或者使用数据计算结果的一些函数，这里函数不要修改数据
      getAge() {
   
        return this.age;
      },
      getHobbiesCount() {
   
        return this.hobbies.length;
      },
    },
    actions: {
   
      //专门定义一些修改数据的算法
      doubleAge() {
   
        this