Vue3中如何让userInfo.value.email实现响应式？

问题根源 #

1. 非响应式赋值：直接将userInfo.value.email赋值给page.formData.email，只是获取了初始值的静态快照，没有建立响应式关联。后续store中userInfo.email的更新不会同步到page.formData.email。
2. 状态回滚：输入框绑定的是响应式的userInfo.email，但提交时打印的是page.formData.email的旧值。若提交逻辑中存在误操作（比如用旧值覆盖store状态），就会触发回滚；同时page是普通对象，Vue无法追踪其属性变化，也可能导致状态更新异常。

解决方案 #

方案1：直接使用store状态提交（最简）

既然输入框已经通过v-model与store的userInfo.email双向绑定，提交时直接读取store中的值即可，无需额外维护formData：

<script setup>
import { useUserStore } from '../store/user';
import { storeToRefs } from "pinia";

const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)

const page = {
  submittingForm: false,
  submitForm() {
    console.log(userInfo.value.email); // 直接读取响应式的store值
    // 此处可直接用userInfo.value.email执行提交逻辑
  }
}
</script>

<template>
  <form name="emailForm" @submit.prevent="page.submitForm">
    <div>
      <label>Email</label>
      <div>
        <input id="email" v-model="userInfo.email">
      </div>
    </div>
    <button>Continue</button>
  </form>
</template>

方案2：让formData.email与store响应式关联

如果必须保留formData结构，需要将page转为响应式对象，并为formData.email建立双向响应式关联：

<script setup>
import { useUserStore } from '../store/user';
import { storeToRefs } from "pinia";
import { reactive } from 'vue';

const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)

// 将page转为响应式对象，Vue才能追踪其属性变化
const page = reactive({
  formData: {
    // 使用get/set实现双向同步
    get email() {
      return userInfo.value.email;
    },
    set email(val) {
      userInfo.value.email = val;
    }
  },
  submittingForm: false,
  submitForm() {
    console.log(this.formData.email); // 此时已同步为最新值
  }
})
</script>

<template>
  <form name="emailForm" @submit.prevent="page.submitForm">
    <div>
      <label>Email</label>
      <div>
        <!-- 可绑定到page.formData.email，也可继续绑定userInfo.email，两者已同步 -->
        <input id="email" v-model="page.formData.email">
      </div>
    </div>
    <button>Continue</button>
  </form>
</template>

关键说明 #

• 必须通过storeToRefs获取userInfo，这样它才是响应式的ref对象。
• 普通JS对象无法被Vue追踪变化，需要用reactive/ref包装才能成为响应式状态。

内容的提问来源于stack exchange，提问作者Vee