【Java Web】Pinia实现组件间数据共享

目录

一、Pinia概述

二、Pinia基本用法

---

一、Pinia概述

在前端工程化的开发环境中，当多个组件(.vue)文件需要使用同一个数据对象时，传统的方法可以使用组件传参或者路由传参来解决但此两种方式都有自己的缺点。pinia可以将多个组件需要共享使用的数据单独在一个.js文件中定义，然后将其数据对象导出，这样其它组件导入该数据对象之后就可以共享此由pinia定义的数据对象且此数据对象默认是响应类型的数据。

二、Pinia基本用法

步骤：

①单独创建的js文件专门定义pinia公共数据

②导入定义pinia共享数据的函数

③使用defineStore()定义公共共享的数据

④将定义的共享数据返回的实例函数导出

⑤在main.js文件中应用pinia共享的数据

⑥组件文件(.vue)中使用pinia定义的共享数据

    1、导入pinia定义的共享数据导出的函数实例

    2、调用函数实例获取其返回的pinia共享数据实例对象

    3、通过实例对象使用pinia定义的公共数据

store.js

//导入定义pinia共享数据的函数 import {defineStore} from 'pinia'   //定义pinia共享的数据并返回一个实例函数 const definePerson=defineStore({     id:"personPinia",   //当前共享数据的全局唯一ID。也可以单独作为一个字符串参数作为形参1     state:()=>{    //定义的响应式pinia共享数据         return {             username:"Orion",             age:24,             hobbies:["唱歌","跑步","打篮球"]         }     },     getters:{   //定义pinia共享数据的get方法，只能获取值         getAge(){             return this.age         },         gethobbiesCount(){