1.storeToRefs
在Count.vue文件中
显的冗余了，如何更加优雅简化代码。用storeToRefs
补充：
为什么不用ToRefs呢？
使用的话会将所有数据都用ref引用包裹，其实方法等是没必要包裹的，具有一定风险
2.getters的使用
概念：当state中的数据，需要经过处理后再使用时，可以使用getters配置。
1.在count.ts文件增添getters
第二种写法：
1.简化写法
2.将up的xiaoli转换成大写
或者
追加getters配置并从组件中读取数据 。
count.ts文件代码：
import {defineStore} from 'pinia'
export const useCountStore = defineStore('count',{
// actions里面放置的是一个一个的方法，用于响应组件中的“动作”
actions:{
increment(value:number){
console.log('increment被调用了',value)
if( this.sum < 10){
// 修改数据（this是当前的store）
this.sum += value,
this.up ='xiaoli',
this.message='欢迎来看我的博客，别忘了点赞噢,谢谢'
}
}
},
// 真正存储数据的地方
state(){
return {
sum:6,
up:'xxx',
message:'xxxxxxxx'
}
},
getters:{
bigSum:state=>state.sum*10,//通过回调来简化写法
upperUp():String{//这里的state可以用this表示
return this.up.toUpperCase()//有this不能用回调！！！
}
}
})Conunt.vue文件代码：
<template>
<div class="count">
<h2>当前求和为:{{ sum }},扩大十倍后: {{bigSum}}</h2>
<h3>博主:{{up}},转换大写后:{{ upperUp }}</h3>
<h4>他想说的话:{{ message }}</h4>
<select v-model.number="n">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<button @click="add">加</button>
<button @click="minus">减</button>
</div>
</template>
<script setup lang="ts" name="Count">
import { ref,reactive } from "vue";
import {useCountStore} from '@/store/count'
import { storeToRefs } from "pinia";
import{toRefs} from 'vue'
const countStore = useCountStore()
const{sum,up,message,bigSum,upperUp} = toRefs(countStore)
// 数据
let n = ref(1) // 用户选择的数字
// 方法
function add(){
//第一种修改方式
// countStore.sum = 8888888,
// countStore.up='小李同学',
// countStore.message='欢迎来看我的博客，别忘了点赞噢,谢谢'
//第二种修改方式
// countStore.$patch({
// sum:666,
// up:'小李同学',
// message:'欢迎来看我的博客，别忘了点赞噢,谢谢'
// })
// 第三种修改方式
countStore.increment(n.value)
}
function minus(){
countStore.sum -= n.value
}
</script>
<style scoped>
.count {
background-color: skyblue;
padding: 10px;
border-radius: 10px;
box-shadow: 0 0 10px;
}
select,button {
margin: 0 5px;
height: 25px;
}
</style>3.$subscribe
通过 store 的 $subscribe() 方法侦听 state 及其变化 ，还可以实现刷新后仍保留数据
loveTalk.ts文件代码：
import {defineStore} from 'pinia' // 引入 pinia 的 defineStore 方法，用于定义状态管理仓库
import axios from 'axios' // 引入 axios 库，用于发送 HTTP 请求
import {nanoid} from 'nanoid' // 引入 nanoid 库，用于生成唯一的 ID
// 导出名为 useTalkStore 的状态管理仓库
export const useTalkStore = defineStore('talk',{
// 定义 actions，用于包含异步操作或批量修改状态的操作
actions:{
// 定义一个异步方法 getATalk，用于获取一条随机的土味情话语录
async getATalk(){
// 发送 GET 请求到指定的 URL，并等待响应结果
// 使用连续解构赋值和重命名的方式获取响应数据中的 content 字段，并将其重命名为 title
let {data:{content:title}} = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')
// 创建一个新的对象 obj，包含使用 nanoid 生成的唯一 ID 和上面获取的 title
let obj = {id:nanoid(),title}
// 将新创建的对象 obj 插入到 talkList 数组的开头
this.talkList.unshift(obj)
}
},
// 定义 state，用于返回组件或应用的初始状态
state(){
// 尝试从 localStorage 中获取 'talkList' 键对应的值，并解析为 JavaScript 对象或数组
// 如果解析失败或获取不到值，则返回一个空数组作为 talkList 的默认值
return {
talkList:JSON.parse(localStorage.getItem('talkList') as string) || []
}
}
})LoveTalk.vue文件代码：
<template>
<div class="talk">
<button @click="getLoveTalk">获取一句土味情话</button>
<ul>
<li v-for="talk in talkList" :key="talk.id">{{talk.title}}</li>
</ul>
</div>
</template>
<script setup lang="ts" name="LoveTalk">
import {useTalkStore} from '@/store/loveTalk'
import { storeToRefs } from "pinia";
const talkStore = useTalkStore()
const {talkList} = storeToRefs(talkStore)
talkStore.$subscribe((mutate,state)=>{
console.log('talkStore里面保存的数据发生了变化',mutate,state)
localStorage.setItem('talkList',JSON.stringify(state.talkList))
})
// 方法
function getLoveTalk(){
talkStore.getATalk()
}
</script>
<style scoped>
.talk {
background-color: orange;
padding: 10px;
border-radius: 10px;
box-shadow: 0 0 10px;
}
</style>展示：
4.store的组合式写法
这种组合式写法的优势在于它提供了更好的代码组织和复用性。通过将逻辑封装在单独的函数中，使用 setup 函数和组合式 API 的其他函数（如 reactive），可以更灵活地控制组件的状态和行为。
之前我们这样写就是选项式的写法
换成组合式写法 ：
loveTalk代码：
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:JSON.parse(localStorage.getItem('talkList') as string) || []
}
}
})
*/
//组合式写法
import {reactive} from 'vue'
export const useTalkStore = defineStore('talk',()=>{
// talkList就是state
const talkList = reactive(
JSON.parse(localStorage.getItem('talkList') as string) || []
)
// getATalk函数相当于action
async function getATalk(){
// 发请求，下面这行的写法是：连续解构赋值+重命名
let {data:{content:title}} = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')
// 把请求回来的字符串，包装成一个对象
let obj = {id:nanoid(),title}
// 放到数组中
talkList.unshift(obj)
}
return {talkList,getATalk}
})
