Vue3组合式API+Pinia：表单v-model变量能否整合为单个对象？

问题 #

我正在使用Vue3的组合式API（Composition API）与Pinia开发表单组件，当前为每个输入字段单独声明ref变量并绑定v-model，实现代码如下：

UserForm.vue #

<template>
  <div>
    <form @submit.prevent="addUser">
        <div><input v-model="firstName" type="text" /></div>
        <div><input v-model="lastName" type="text" /></div>
        <div><input v-model="email" type="text" /></div>
        // Lots more inputs
    </form>
  </div>
</template>

<script>
import { ref } from "vue";
import { useUserStore } from "../store/useUserStore";
    
export default {
  setup() {
    const firstName = ref("");
    const lastName = ref("");
    const email = ref("");
    
    const userStore = useUserStore();

    function addUser(firstName, lastName, email) {
        userStore.addUser(firstName, lastName, email);
    }

    return { firstName, lastName, email, addUser, userStore };
  },
};
</script>

useUserStore.js #

import { defineStore } from "pinia";

export const useUserStore = defineStore('user', {
  state: () => ({
    users: [],
  }),
  actions: {
    addUser(firstName, lastName, email) {
      this.users.push({ firstName, lastName, email })
    },
  },
});

我希望将所有表单输入字段绑定到一个formData对象中，仅返回该对象而非大量单独变量，期望的模板写法如下：

<template>
  <div>
    <form @submit.prevent="addUser">
        <div><input v-model="formData.firstName" type="text" /></div>
        <div><input v-model="formData.lastName" type="text" /></div>
        <div><input v-model="formData.email" type="text" /></div>
        // Lots more inputs
    </form>
  </div>
</template>

我尝试了如下写法但无法生效：

const formData = {
    firstName: ref(""),
    lastName: ref(""),
    email: ref("")
};

请问这种实现方式是否可行？如何使用对象实现v-model绑定来存储所有表单输入？

解决方案 #

这种实现完全可行，你之前的写法不生效的核心原因是：普通对象内部嵌套ref值时，Vue无法追踪该对象的响应式变化，且模板中直接访问formData.firstName拿到的是ref对象本身而非其value属性，导致v-model无法完成双向绑定。

正确的实现方式是使用Vue3的reactive API创建响应式对象，它会将整个对象转化为响应式结构，内部属性无需单独用ref包裹：

修改后的UserForm.vue #

<template>
  <div>
    <form @submit.prevent="addUser">
        <div><input v-model="formData.firstName" type="text" /></div>
        <div><input v-model="formData.lastName" type="text" /></div>
        <div><input v-model="formData.email" type="text" /></div>
        // 更多输入字段
    </form>
  </div>
</template>

<script>
import { reactive } from "vue";
import { useUserStore } from "../store/useUserStore";
    
export default {
  setup() {
    // 用reactive创建响应式表单对象
    const formData = reactive({
      firstName: "",
      lastName: "",
      email: ""
    });
    
    const userStore = useUserStore();

    function addUser() {
        // 直接传递formData的属性给store
        userStore.addUser(formData.firstName, formData.lastName, formData.email);
        // 提交后重置表单
        Object.assign(formData, { firstName: "", lastName: "", email: "" });
    }

    return { formData, addUser };
  },
};
</script>

可选：优化Pinia的addUser方法 #

你可以修改Pinia的action，直接接收整个用户对象，让代码更简洁：

// useUserStore.js
import { defineStore } from "pinia";

export const useUserStore = defineStore('user', {
  state: () => ({
    users: [],
  }),
  actions: {
    addUser(user) {
      this.users.push({ ...user }) // 解构对象避免后续修改影响已存储的数据
    },
  },
});

对应的addUser函数可简化为：

function addUser() {
    userStore.addUser(formData);
    Object.assign(formData, { firstName: "", lastName: "", email: "" });
}

如果坚持要用ref包裹对象，也可以用ref创建对象的响应式引用，但模板中需要写formData.value.firstName，这种写法不如reactive直观，更推荐用reactive处理复杂表单对象。

内容的提问来源于stack exchange，提问作者slim.mckins