Vue3中Pinia状态更新问题：表单值无法存入Store

问题根源 #

1. Pinia Store未暴露可修改状态：你的store仅返回了计算属性getFirst/getSecond/getEmail，但核心状态firstName/secondName/email未被暴露，导致$patch无法定位到这些属性进行修改。
2. Reactive对象错误使用.value：form是reactive创建的对象，其属性无需加.value，直接访问即可（.value是ref类型专属语法）。
3. 冗余事件绑定：表单已绑定@submit="onSubmit"，同时按钮又绑定@click="onSubmit"，且按钮为type="button"，不符合表单提交的标准流程。

修改后的代码 #

1. Pinia Store（counter.js）

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

export const useCounterStore = defineStore('counter', () => {
    const count = ref(0);

    let firstName = ref('');
    let secondName = ref('');
    let email = ref('');

    const getFirst = computed(() => firstName.value)
    const getSecond = computed(() => secondName.value)
    const getEmail = computed(() => email.value)

    function increment() {
      count.value++
    }

    // 新增：返回可修改的状态属性，让$patch能访问到
    return { count, firstName, secondName, email, getFirst, getSecond, getEmail, increment }
})

2. Create.vue

<script setup>
import { reactive } from "vue";
import { useCounterStore } from '@/stores/counter';
const counter = useCounterStore();

const form = reactive({
    first: "",
    second: "",
    email: ""
});

const onSubmit = (e) => {
    e.preventDefault();
    // 修复：去掉多余的.value，合并$patch调用提升性能
    counter.$patch({ 
        firstName: form.first,
        secondName: form.second,
        email: form.email
    });
}
</script>

<template>
<form @submit="onSubmit">
        {{ counter.getFirst + 'MYFIRST' }} {{ counter.getSecond + 'MYSECOND' }} {{ counter.getEmail + 'MYEMAIL' }}
        <div class="row mt-4">
            <div class="col-6">
                <label for="exampleFormControlInput1" class="form-label">First</label>
                <input v-model="form.first" type="text" class="form-control" id="exampleFormControlInput1"
                    placeholder="First name">
            </div>        
            <div class="col-6">
                <label for="exampleFormControlInput1" class="form-label">Second</label>
                <input v-model="form.second" type="text" class="form-control" id="exampleFormControlInput1"
                    placeholder="Second name">
            </div>

            <div class="col-6 mt-2">
                <label for="exampleFormControlInput1" class="form-label">Email</label>
                <input v-model="form.email" type="email" class="form-control" id="exampleFormControlInput1"
                    placeholder="name@example.com">
            </div>

            <div class="col-12 mt-3">
                <!-- 修复：改为type="submit"，去掉冗余click绑定 -->
                <button type="submit" class="btn btn-dark push-right">Create</button>
                <button type="button" class="btn btn-dark">All users</button>
            </div>
        </div>
    </form>
</template>

修复说明 #

• 暴露状态属性后，Pinia的$patch方法才能正确定位并修改目标字段；
• 移除.value符合reactive对象的访问规则，避免获取到undefined；
• 合并$patch调用减少状态更新次数，提升性能；
• 使用type="submit"遵循表单提交的标准流程，消除冗余事件绑定。

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