LoveTalk.vue: 调用：
// 方法
const talkStore = useTalkStore()
function getLoveTalk(){
talkStore.getATalk()
}
如果是要简短的形式调用：
const talkStore = useTalkStore() // user hooks 的形式调用
const {schoole,local} = talkStore // 通过这个方式调用
在页面就可以简单调用 不talkStore. schoole , 而是直接： schoole 的形式调用
因为 这样的不能动态调用响应式操作：最后执行：
/* 使用storeToRefs转换countStore，随后解构 */
注意：使用 storeToRefs 一定要引入：
import { storeToRefs } from "pinia";
const {schoole,local} = storeToRefs(talkStore)
LoveTalk.ts:
import {defineStore} from 'pinia'
import axios from 'axios'
import {nanoid} from 'nanoid'export const useTalkStore = defineStore('talk',{actions:{async getATalk(){// 发请求，下面这行的写法是：连续解构赋值+重命名let {data:{content:title}} = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')// 把请求回来的字符串，包装成一个对象let obj = {id:nanoid(),title}// 放到数组中this.talkList.unshift(obj)}},// 真正存储数据的地方state(){return {talkList:[{id:'ftrfasdf01',title:'今天你有点怪，哪里怪？怪好看的！'},{id:'ftrfasdf02',title:'草莓、蓝莓、蔓越莓，今天想我了没？'},{id:'ftrfasdf03',title:'心里给你留了一块地，我的死心塌地'}]}}
})5.5.【storeToRefs】
-
借助
storeToRefs将store中的数据转为ref对象，方便在模板中使用。 -
注意：
pinia提供的storeToRefs只会将数据做转换，而Vue的toRefs会转换store中数据。
<template><div class="count"><h2>当前求和为：{{sum}}</h2></div>
</template>
<script setup lang="ts" name="Count">import { useCountStore } from '@/store/count'/* 引入storeToRefs */import { storeToRefs } from 'pinia'
/* 得到countStore */const countStore = useCountStore()/* 使用storeToRefs转换countStore，随后解构 */const {sum} = storeToRefs(countStore)
</script>
5.6.【getters】
5.6.【getters】
-
概念：当
state中的数据，需要经过处理后再使用时，可以使用getters配置。 -
追加
getters配置。// 引入defineStore用于创建store import {defineStore} from 'pinia' // 定义并暴露一个store export const useCountStore = defineStore('count',{// 动作actions:{/************/},// 状态state(){return {sum:1,school:'atguigu'}}, // 计算getters:{bigSum:(state):number => state.sum *10,upperSchool():string{return this. school.toUpperCase()}} }) -
组件中读取数据：
const {increment,decrement} = countStore let {sum,school,bigSum,upperSchool} = storeToRefs(countStore)
