第二十八：5.5.【storeToRefs】5.6.【getters】

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】

1. 概念：当state中的数据，需要经过处理后再使用时，可以使用getters配置。

2. 追加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()}}
   })

3. 组件中读取数据：

   const {increment,decrement} = countStore
   let {sum,school,bigSum,upperSchool} = storeToRefs(countStore)