【前端之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.age = this.age * 2;
      },
    },
  }
);

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

import { createApp } from "vue";

import App from "./App.vue";
//导入router路由对象
import router from "./routers/router";

//开启全局的pinia功能
import { createPinia } from "pinia";
let pinia = createPinia();

//给app对象使用router对象，使用 pinia 对象，然后挂载到app上
let app = createApp(App);

app.use(router);
app.use(pinia);

app.mount("#app");

4、Operate.vue 中操作Pinia数据

<script setup>
//导入 pinia 数据
import { definePerson } from "../store/store.js";
let person = definePerson();
</script>

<template>
  <div>
    <h1>用于修改pinia数据</h1>
    <br />
    姓名：<input type="text" v-model="person.username" /><br />
    年龄： <input type="text" v-model="person.age" /><br />
    爱好： 唱<input type="checkbox" value="唱" v-model="person.hobbies" />
    跳<input type="checkbox" value="跳" v-model="person.hobbies" /> rap<input
      type="checkbox"
      value="rap"
      v-model="person.hobbies"/>
    吃饭<input type="checkbox" value="吃饭" v-model="person.hobbies" />
    看电影<input type="checkbox" value="看电影" v-model="person.hobbies" />
    篮球<input type="checkbox" value="篮球" v-model="person.hobbies" /><br />

    <button @click="person.doubleAge()">年龄加倍</button><br />
    <!-- $reset()方法恢复默认值 -->
    <button @click="person.$reset()">默认值恢复</button><br />
    <!-- $patch()方法一次性修改多个属性值 -->
    <button @click="person.$patch({username:'summer',age:21,hobbies:['打电动','花花']})">修改属性值</button><br />
    <hr />
    展示person数据{{ person }}
  </div>
</template>

<style scoped></style>

5、List.vue中展示Pinia数据

<script setup>
//导入 pinia 数据
import { definePerson } from "../store/store.js";
let person = definePerson();
</script>

<template>
  <div>
    <h1>List页面：用于展示pinia数据</h1>
    姓名：{{ person.username }} <br />
    年龄：{{ person.age }}<br />
    通过get获取年龄：{{ person.getAge }}<br />
    爱好数量：{{ person.getHobbiesCount }}<br />
    展示所有爱好：
    <ul>
      <li
        v-for="(hobby, index) in person.hobbies"
        :key="index"
        v-text="hobby"
      ></li>
    </ul>
  </div>
</template>

<style scoped></style>

6、定义组件路由router.js

//导入路由依赖
import { createRouter, createWebHashHistory } from "vue-router";
//导入vue组件
import List from "../components/List.vue";
import Operate from "../components/Operate.vue";

//创建路由
const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: "/",
      component: Operate,
    },
    {
      path: "/operate",
      // component: Operate,
          //验证pinia数据是否实施更新 在router中统一界面同时展示Operate和List页面内容，验证pinia数据是否是实时更新-->
      components: {
        default: Operate,
        list: List,
      },
    },
    {
      path: "/list",
      component: List,
    },
  ],
});

//对外暴露路由
export default router;

8、App.vue中通过路由切换组件

<script setup></script>

<template>
  <div>
    <router-link to="/operate">operate</router-link><br />
    <router-link to="/list">list</router-link>
    <hr />
    <router-view></router-view><br />
    <!-- 验证pinia数据是否实施更新 路由连接对应视图的展示位置
    在router中统一界面同时展示Operate和List页面内容，验证pinia数据是否是实时更新-->
    <router-view name="list"></router-view>
  </div>
</template>

<style scoped></style>

9、执行启动命令演示

npm run dev

pinia代码演示

【注意：视频内容最下面的应该是展示所有爱好：，爱好列表内容不全面，请忽略】