Pina 解构的响应式丢失问题

先说结论:

在 Pinia 中，如果使用 storeToRefs 解构出 user 对象，再通过 toRefs 解构 user 的属性（如 name、age），修改 Pinia 中的 user 后，解构出的 name 和 age 仍然不会自动更新。这是因为 storeToRefs 和 toRefs 的工作方式不同，且嵌套解构会破坏响应性。

原因分析

1. storeToRefs 的作用
   storeToRefs 是 Pinia 提供的工具函数，用于将 Store 的顶层响应式状态 解构为 ref，保持响应性。

   • 但它 不会递归处理嵌套对象（如 user 内部的 name 和 age）。

   • 所以 storeToRefs(store).user 是一个 ref，但 user 内部的属性仍然是普通对象。

2. toRefs 的局限性
   toRefs 只能将 响应式对象（reactive） 的属性转为 ref，但它不能恢复已经失去响应性的对象：

   const { user } = storeToRefs(store); // user 是 ref，但 user.value 是普通对象
   
   const { name, age } = toRefs(user.value); // ❌ name 和 age 不会响应 Pinia 的更新

   • 因为 user.value 是普通对象（不是 reactive），toRefs 无法使其属性保持响应性。

3. 修改 Pinia 后，为什么 name 和 age 不更新？

   • 如果直接修改 store.user（替换整个对象），user 这个 ref 会更新，但 name 和 age 仍然是旧的 ref，不会自动同步。

   • 如果修改 store.user.name，由于 user 是 ref，但 name 不是响应式的，所以不会触发更新。

这里是错误代码

import { defineStore } from 'pinia'
import { ref } from 'vue'

export const useUserStore = defineStore('user', () => {
  const user = ref({
    name: '张三',
    age: 18,
    sex: '男',
    address: '北京市',
  })

  function updateUserAge() {
    console.log('updateUserAge')
    user.value.age++
  }

  function $reset() {
    console.log('$reset')
    user.value = { name: '张三', age: 18, sex: '男', address: '北京市' }
  }
  return { user, updateUserAge, $reset }
})

<template>
 
  <h1>Pina User</h1>

  <div class="user card">
    <p>姓名: {{ name }}</p>
    <p>年龄: {{ age }}</p>
    <p>性别: {{ sex }}</p>
    <p>地址: {{ address }}</p>
    <div class="buttons">
      <el-button type="primary" @click="updateUserAge()">更新年龄</el-button>
      <el-button type="primary" @click="resetUser">数据重置</el-button>
    </div>
  </div>

  <RouterView />
</template>
<script setup>
import { RouterLink, RouterView } from 'vue-router'
import { useUserStore } from './stores/user.js'
import { storeToRefs } from 'pinia'
import { toRefs } from 'vue'

const store = useUserStore()
const { user } = storeToRefs(store)
const { name, age, sex, address } = toRefs(user.value)
const { updateUserAge } = store

function resetUser() {
  store.$reset()
}
</script>

这里是正确做法

<template>

  <h1>Pina User</h1>

  <div class="user card">
    <p>姓名: {{ user.name }}</p>
    <p>年龄: {{ user.age }}</p>
    <p>性别: {{ user.sex }}</p>
    <p>地址: {{ user.address }}</p>
    <div class="buttons">
      <el-button type="primary" @click="updateUserAge()">更新年龄</el-button>
      <el-button type="primary" @click="resetUser">数据重置</el-button>
    </div>
  </div>

  <RouterView />
</template>
<script setup>
import { RouterLink, RouterView } from 'vue-router'
import { useUserStore } from './stores/user.js'
import { storeToRefs } from 'pinia'

const store = useUserStore()
const { user } = storeToRefs(store)
const { updateUserAge } = store

function resetUser() {
  store.$reset()
}
</script>