如何在输入框v-model中使用Pinia Store Getter？值未更新问题排查

你的代码存在的核心问题 #

• 拼写错误：reponses是responses的笔误，导致变量未正确引用，这会直接造成后续赋值和console.log操作失效。
• Getter的只读特性：Pinia的getter本质是只读的计算属性，仅用于从state派生值，本身不支持直接修改。你试图直接修改responses.value.input1，或想把getter用于v-model，这违背了getter的设计初衷。
• 响应式绑定失效：responses.value.input1 = input.value仅在组件初始化时执行一次，input后续的输入变化不会同步到store的state中，submit时自然拿不到更新后的值。

能否直接将Getter用于v-model？ #

不能。v-model需要可读可写的响应式变量，而Pinia getter默认只有getter函数，没有setter逻辑，无法触发state的更新。如果要适配v-model，需要手动创建带setter的computed属性，在setter中调用action来修改state。

正确的实现方式 #

方式1：直接绑定Store State（简单场景） #

如果不需要复杂的派生逻辑，可直接使用store的state做v-model，Pinia的state本身是响应式的，可直接修改（简单场景下可行，复杂场景推荐用action）：

修改Form1.vue：

<template>
  <input type="text" name="input_form" v-model="userStore.formsResponses.form1.input1"/>
  <button type="Primary" @click="submit">submit</button>
</template>

<script setup>
import useUserStore from '@/store/userStore';

const userStore = useUserStore();

function submit() {
  console.log(userStore.formsResponses.form1.input1); // 正常输出
}
</script>

方式2：使用带Setter的Computed适配v-model（推荐，符合最佳实践） #

如果必须使用getter，或需要在绑定前做数据处理，可创建带setter的computed，在setter中调用action更新state：

修改Form1.vue：

<template>
  <input type="text" name="input_form" v-model="formInput"/>
  <button type="Primary" @click="submit">submit</button>
</template>

<script setup>
import { computed } from 'vue';
import useUserStore from '@/store/userStore';

const userStore = useUserStore();

// 带setter的computed，适配v-model双向绑定
const formInput = computed({
  get() {
    return userStore.getFormsInput.input1; // 通过getter获取值
  },
  set(newValue) {
    // 调用action更新单个字段，避免覆盖整个form对象
    userStore.setFormsResponses('input1', newValue);
  }
});

function submit() {
  console.log(userStore.getFormsInput.input1); // 正常输出
}
</script>

同时优化Userstore.js的action，支持单个字段更新：

actions: {
  setFormsResponses(field, value) {
    this.formsResponses.form1[field] = value;
  },
},

方式3：修正原代码的错误（仅作问题理解用，不推荐） #

如果要保留原有代码结构，需修正拼写错误，并通过watch同步input值到store：

<template>
  <input type="text" name="input_form" v-model="input"/>
  <button type="Primary" @click="submit">submit</button>
</template>

<script setup>
import { computed, ref, watch } from 'vue';
import useUserStore from '@/store/userStore';

const userStore = useUserStore();

const input = ref('');
const responses = computed(() => userStore.getFormsInput);

// 监听input变化，实时同步到store
watch(input, (newVal) => {
  userStore.setFormsResponses({ ...responses.value, input1: newVal });
});

// 初始化时同步store的值到input
input.value = responses.value.input1;

function submit() {
  console.log(responses.value.input1); // 正常输出
}
</script>

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