前言
本文继续讲解Pinia 的另一个知识点storeToRefs。storeToRefs 是 Pinia 提供的一个非常有用的工具函数，它可以帮助我们将 store 中的数据转换为响应式的 ref 对象，从而更方便地在 Vue 组件中使用。本文将详细讲解 storeToferences 的作用、用法以及实际应用案例。
一、storeToRefs 的作用
在 Pinia 中，store 是一个包含 state、getters、actions 等属性的对象。当我们需要在 Vue 组件中使用 store 中的数据时，通常会通过 computed 属性或者 useStore 钩子函数来获取。然而，直接获取到的数据并不是响应式的 ref 对象，这意味着当 store 中的数据发生变化时，组件可能无法及时响应。
storeToRefs 的作用就是将 store 中的数据转换为响应式的 ref 对象。这样，在 Vue 组件中使用这些数据时，就可以实现响应式更新了。
二、storeToRefs 的用法
storeToRefs 是一个工具函数，它接受一个 store 对象作为参数，并返回一个包含 store 中所有响应式数据的对象。这个对象的每个属性都是一个 ref 对象，对应 store 中的相应数据。
使用 storeToRefs 的基本语法如下：
import { storeToRefs } from 'pinia';
import { useStore } from '@/store';
const store = useStore();
const { someData } = storeToRefs(store);在上面的例子中，someData 就是一个响应式的 ref 对象，它对应 store 中的 someData 属性。
三、实际应用案例
下面通过一个具体的例子来演示如何在 Vue 组件中使用 storeToRefs。
首先定义loveTalk.ts，也就是定义数据管理的ts文件。
代码语言：js复制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: '心里给你留了一块地，我的死心塌地' }
]
};
}
});创建组件LoveTalk.vue，调用上面的ts数据。
代码语言：js复制<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);
function getLoveTalk() {
talkStore.getATalk();
}
</script>
<style scoped>
.talk {
background-color: orange;
padding: 10px;
border-radius: 10px;
box-shadow: 0 0 10px;
}
</style>在上面的例子中，我们首先通过 useTalkStore 钩子函数获取到了 talkStore 对象。然后，我们使用 storeToRefs 将 talkStore 中的 talkList 数据转换为了响应式的 ref 对象。这样，在模板中就可以直接使用 talkList 变量了。运行结果如下：
四、总结
storeToRefs 是 Pinia 提供的一个非常有用的工具函数，它可以帮助我们将 store 中的数据转换为响应式的 ref 对象，从而更方便地在 Vue 组件中使用。通过本文的介绍，相信大家对 storeToRefs 有了更深入的了解和认识。在实际开发中，合理利用 storeToRefs 可以提高代码的可读性和可维护性，提升开发效率。
