第二十八：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)