Loading... Pinia是集中式状态管理工具，可以实现多个组件共用数据。 ## 引入pinia 在`main.ts`中进行引用 ```ts import './assets/main.css' import { createApp } from 'vue' import App from './App.vue' import router from './router' import { createPinia } from 'pinia' const app=createApp(App) //创建 const pinia=createPinia() app.use(router) app.use(pinia) app.mount('#app') ``` 引入 `createPinia` 即可 ## 存储+读取数据 新建一个.ts文件来读取数据。 `love.ts` ```ts import { defineStore } from "pinia"; export const useCountLove=defineStore('love',{ state(){ return{ talkList:[{id:'',content:''}] } } }) ``` 在vue文件中这样引用： ```vue <template> <div class="love"> <button @click="getLove">获取情话</button> <ul> <li v-for="t in store.talkList" :key="t.id">{{ t.content }}</li> </ul> </div> <div class="count"> <count></count> </div> </template> <script lang="ts" setup name="love"> import count from './count.vue'; import axios from 'axios'; import {nanoid} from 'nanoid' import { useCountLove } from '@/store/love'; const store=useCountLove() async function getLove(){ let result=await axios.get('/api') let obj={id:nanoid(),content:result.data.content} store.talkList.unshift(obj) } </script> ```  这样就可以完成读取和写入数据了 ## actions 我们可以把一些常用的函数封装到pinia中。例如上面的代码： `love.ts` ```ts import { defineStore } from "pinia"; import axios from "axios"; import {nanoid} from 'nanoid' export const useCountLove=defineStore('love',{ actions:{ async getATalk(){ let result=await axios.get('/api') let obj={id:nanoid(),content:result.data.content} this.talkList.unshift(obj) } }, state(){ return{ talkList:[{id:'',content:''}] } } }) ``` 设置了action后就可以在vue里引用。 ```vue <template> <div class="love"> <button @click="store.getATalk()">获取情话</button> <ul> <li v-for="t in store.talkList" :key="t.id">{{ t.content }}</li> </ul> </div> <div class="count"> <count></count> </div> </template> <script lang="ts" setup name="love"> import count from './count.vue'; import { useCountLove } from '@/store/love'; const store=useCountLove() </script> ``` 也可以获得相同的效果。 ## storeToRefs 与toRefs相似，当我们 `const {sum,school.address} = countStore`这类代码是会丢失响应式。 使用 `const {sum,school.address} = storeToRefs(countStore)`即可。 ## getters 如果我们有数据需要预处理，那么我们可以使用getters `love.ts` ```ts import { defineStore } from "pinia"; import axios from "axios"; import {nanoid} from 'nanoid' export const useCountLove=defineStore('love',{ actions:{ async getATalk(){ let result=await axios.get('/api') let obj={id:nanoid(),content:result.data.content} this.talkList.unshift(obj) } }, state(){ return{ talkList:[{id:'',content:''}] } }, getters:{ leng(state){ return state.talkList.length } } }) ```  ## $subscribe $subscribe有点像watch，他会在数据发生变化时执行函数。就可以做成自动保存。 `love.vue` ```vue <template> <div class="love"> <button @click="store.getATalk()">获取情话</button> <ul> <li v-for="t in store.talkList" :key="t.id">{{ t.content }}</li> </ul> </div> <div class="count"> <count></count> </div> </template> <script lang="ts" setup name="love"> import count from './count.vue'; import { useCountLove } from '@/store/love'; const store=useCountLove() store.$subscribe((mutata,state)=>{ localStorage.setItem('talklist',JSON.stringify(state.talkList)) }) </script> ``` `love.ts` ```ts import { defineStore } from "pinia"; import axios from "axios"; import {nanoid} from 'nanoid' export const useCountLove=defineStore('love',{ actions:{ async getATalk(){ let result=await axios.get('/api') let obj={id:nanoid(),content:result.data.content} this.talkList.unshift(obj) } }, state(){ return{ talkList:JSON.parse(localStorage.getItem('talklist') as string) ||[] } }, getters:{ leng(state){ return state.talkList.length } } }) ``` 这样就做到了本地存储。  刷新后依然可以读取。  最后修改：2025 年 06 月 02 日 © 允许规范转载 赞 不用打赏哦！