Pina之storeToRefs的使用: storeToRefs 是 Pinia 提供的一个非常有用的函数，它的主要作用就是保持store中的状态的响应性，确保在store中的值更新时，组件会自动重新渲染。

以下是关于 storeToRefs 的一些重要点：

1.响应式： storeToRefs 返回的是响应式引用（refs）。这意味着当store中的值改变时，使用这些引用的组件会自动更新。

2.只针对状态： storeToRefs 只会为 store 中的状态（state）创建引用，不会为 actions 或非响应式属性创建引用。

3.性能优化： 使用 storeToRefs 可以避免不必要的组件重新渲染。它只会在被使用的属性发生变化时触发更新。

4.用法示例：

<script setup>
import { storeToRefs } from 'pinia'
import { useEventDashboardStore } from './stores/eventDashboard'

const store = useEventDashboardStore()

// 使用 storeToRefs 解构，保持响应性
const { shouldShowLoader, heading, sidebarLinks } = storeToRefs(store)

// 直接从 store 中获取 action
const { fetchEventDashboardItems } = store

// 不需要显式地返回任何东西，<script setup> 会自动暴露声明的变量和函数给模板
</script>

<template>
  <!-- 
  现在你可以直接在模板中使用这些响应式引用和 action
  例如：
  <div v-if="shouldShowLoader">Loading...</div>
  <h1>{{ heading }}</h1>
  <ul>
    <li v-for="link in sidebarLinks" :key="link.id">{{ link.text }}</li>
  </ul>
  <button @click="fetchEventDashboardItems">Fetch Items</button>
  -->
</template>

5.实时更新： 当 store 中的 shouldShowLoader、heading 或 sidebarLinks 发生变化时，使用这些变量的组件会自动更新，无需手动触发。

6.与普通解构的区别： 如果你直接解构 store 而不使用 storeToRefs，你会失去响应性：

// 错误用法，会失去响应性
const { shouldShowLoader, heading, sidebarLinks } = store

总的来说，storeToRefs 确实能保持实时更新，这是它的主要用途之一。它使得在组件中使用 Pinia store 的状态变得既方便又高效。