当前位置：首页 > news >正文

storeToRefs

news 来源：原创 2025/5/10 17:10:47

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

为什么需要 `storeToRefs`？

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

使用方法

导入 storeToRefs
通过 useXxxStore 获取 Store 实例
用 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 中的 name
  console.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>

注意事项

仅解构 state 和 getters
storeToRefs 会忽略 Store 中的 Actions（方法），因为它们是函数，不需要响应性。
如果需要调用方法，直接从 Store 实例调用：
```
const userStore = useUserStore()
const { updateUser } = userStore // ✅ 直接解构方法即可
```

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

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

对比 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 和 getter

const 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>