嘉定企业网站制作职业培训机构

storeToRefs 是 Pinia 提供的一个工具函数，用于在组合式 API（Composition API）中解构 Store 的状态（state）或计算属性（getters）时保持响应性。以下是它的具体用法和示例：

---

为什么需要 storeToRefs？

当直接从 Store 解构 state 或 getters 时，解构后的值会失去响应性（类似直接解构 reactive 对象）。使用 storeToRefs 可以将这些属性转换为 ref，确保解构后依然保持响应性。

---

使用方法

1. 导入 storeToRefs
2. 通过 useXxxStore 获取 Store 实例
3. 用 storeToRefs 包裹 Store 实例，解构需要的属性

import { storeToRefs } from 'pinia'
import { useUserStore } from '@/stores/user'const userStore = useUserStore()
const { name, age, isAdult } = storeToRefs(userStore) // 解构并保持响应性

---

示例对比

错误用法（失去响应性）

<script setup>
import { useUserStore } from '@/stores/user'const userStore = useUserStore()
const { name, age } = userStore // ❌ 直接解构，失去响应性！const changeName = () => {userStore.name = 'Bob' // 修改 Store 中的 nameconsole.log(name) // 这里不会更新，因为解构后的 name 是普通值
}
</script><template><p>{{ name }}</p> <!-- 不会响应式更新 -->
</template>

正确用法（使用 storeToRefs）

<script setup>
import { storeToRefs } from 'pinia'
import { useUserStore } from '@/stores/user'const userStore = useUserStore()
const { name, age, isAdult } = storeToRefs(userStore) // ✅ 保持响应性const changeName = () => {userStore.name = 'Bob' // 或 name.value = 'Bob'
}
</script><template><p>{{ name }}</p> <!-- 响应式更新 --><p>{{ age }}</p><p>{{ isAdult }}</p>
</template>

---

注意事项

1. 仅解构 state 和 getters
storeToRefs 会忽略 Store 中的 Actions（方法），因为它们是函数，不需要响应性。
   如果需要调用方法，直接从 Store 实例调用：

   const userStore = useUserStore()
   const { updateUser } = userStore // ✅ 直接解构方法即可
   

2. 修改值的方式
   解构后的 ref 需要通过 .value 修改：

   const { name } = storeToRefs(userStore)
   name.value = 'Charlie' // ✅ 正确
   

3. 对比 toRefs
storeToRefs 是 Pinia 对 toRefs 的封装，专门针对 Store 的优化，能正确处理 getters。

---

完整示例

<script setup>
import { storeToRefs } from 'pinia'
import { useCounterStore } from '@/stores/counter'const counter = useCounterStore()
const { count, doubleCount } = storeToRefs(counter) // 解构 state 和 getterconst increment = () => {counter.increment() // 直接调用 Action
}
</script><template><div><p>Count: {{ count }}</p> <!-- 响应式 --><p>Double: {{ doubleCount }}</p> <!-- 响应式 --><button @click="increment">+1</button><button @click="count++">直接修改 count</button> <!-- 通过 .value 简写 --></div>
</template>

---

总结

• 使用场景：在组合式 API 中需要解构 Store 的 state 或 getters 时，用 storeToRefs 保持响应性。
• 核心作用：将 Store 的响应式属性转换为 ref，避免解构后失去响应性。
• 避免直接解构：除非你明确知道不需要响应性（如只读取一次值）。