【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(){             return this.hobbies.length         }     },     actions:{   //定义pinia共享数据的修改方法（也可以使用箭头函数，但访问数据时需要传入state作为形参）         doubleAge(){             return this.age*=2         }     }    }) //将定义好的pinia共享数据返回的函数导出 export {definePerson}

main.js

import { createApp } from 'vue' import App from './App.vue' import route from './routers/router' let app=createApp(App) app.use(route) //开启全局的pinia共享数据的功能 import { createPinia } from 'pinia' //创建pinia实例供应用使用，使各组件文件都能获取pinia共享的数据 const pinia = createPinia() //应用pinia定义的共享数据 app.use(pinia) app.mount('#app')

App.vue

<template>   <div>         <router-link to="/operate">Operation</router-link><br>         <router-link to="/list">List</router-link>         <hr>         <router-view></router-view><hr>         <router-view name="List"></router-view>   </div> </template>

Operation.vue

<script setup> //导入pinia导出的共享函数 import { definePerson } from '../store/store'; let person=definePerson()   //获取pinia共享数据,返回其对象 </script> <template>   <div>       <h2>操作pinia定义的状态数据</h2>       用户名：<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">跳舞              <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>       <label v-text="person.getAge"/><br>       <label v-text="person.gethobbiesCount"/><br>       <button v-on:click="person.doubleAge">年龄加倍*2</button><br>       <button v-on:click="person.$reset()">pinia内置函数恢复默认值</button><br>       <button @click="person.$patch({username:'关山月',age:100,hobbies:['唱','跳','rapper','干饭哈!']})">一次修改多个值</button>       <hr>       {{ person }}   </div> </template>

List.vue

<script setup> import { definePerson } from '../store/store'; let person = definePerson(); </script> <template>   <div>       <h2>展示pinia定义的公共数据</h2>       用户名：{{person.username}}<br/>       年龄：{{person.age}}<br/>       年龄：{{person.hobbies}}<br/>       getAge函数:{{person.getAge}}<br/>       gethobbiesCount函数:{{person.gethobbiesCount}}<br/>   </div> </template>

router.js

//导入定义路由相关的函数 import {createRouter,createWebHashHistory} from 'vue-router' import Operation from '../components/Operation.vue' import List from '../components/List.vue' const route = createRouter({     history:createWebHashHistory(),     routes:[         {             path:'/operate',             component: Operation         },         {             path:'/',             components:{                 default:Operation,                 List:List             }         },         {             path:'/list',             component:List         }     ] })   export default route

运行效果图

@声明：“山月润无声”博主知识水平有限，以上文章如有不妥之处，欢迎广大IT爱好者指正，小弟定当虚心受教！