Как использовать геттеры хранилища pinia для v-модели ввода?

Getter от pinia в конце концов является вычисляемым значением состояния. Вы должны не использовать вычисляемое значение в качестве v-модели. Особенно, когда в пинии сейчас нет геттера и сеттера для геттера.

Если getFormsInput предназначен только для возврата определенного свойства json. Я предлагаю вам изменить состояние напрямую, обратившись к formsResponses.form1.input1.

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

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

const userStore = useUserStore();

function submit() {
  console.info(userStore.formsResponses.form1.input1); //they should be the same
  console.info(userStore.getFormsInput); //they should be the same
}

</script>

Кстати, я не думаю, что .value нужен, когда вы пытаетесь получить доступ к значению свойства json.

Я считаю, что вы сделали опечатку здесь.

const responses = computed(() => userStore.getFormsInput);
    
responses.value.input1 = input.value; //typo responses
    
function submit() {
  console.info(responses.value.input1); // typo responses
}

Существует много способов двойной привязки состояния хранилища к входным данным формы (используя записываемый объект, вычисляемый непосредственно в состоянии хранилища, используя storeToRefs или используя перезаписываемый объект, вычисляемый с помощью геттера хранилища и действия, и это лишь некоторые из них).
Запись состояния хранилища с использованием Writable Computed (также известного как вычисляемый геттер/сеттер) дает вам контроль и удобочитаемость кода:

const myInput = computed({
  get() {
    return someStore.someState
  },
  set(val) {
    someStore.someState = val
  }
})

Вам это не нужно здесь, но вы обнаружите, что это хлеб с маслом сложных форм, особенно когда вам нужен детальный контроль.

Примечательно, что pinia дает вам отличную служебную функцию, называемую storeToRefs, которая предоставляет все состояния хранилища и геттеры как реактивные refs. Состояние можно напрямую использовать с v-model:

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

const { form1 } = storeToRefs(useUserStore());
</script>
<template>
  <input v-model = "form1.input1" />
</template>

Смотрите, работает. Ввод в основном записывается непосредственно в состояние хранилища.

Если вы хотите связать геттер магазина с v-model, у него должен быть сеттер (как показано выше).

Примечание: я значительно сократил структуру вашего магазина. Старайтесь не усложнять без веской причины.

Если вам нужно локальное состояние формы (и пользователь должен выбрать, когда сохранять/сбрасывать):

Пример состояния локальной формы.
Опять же, убран ненужный пух/шаблон.
Обратите внимание на деструктуризацию, используемую в двух точках соприкосновения между состоянием хранилища и локальным состоянием. Вы могли бы подумать, что задание submit может быть:

form1.value = localForm

..., но как только вы это сделаете, реактивность localForm привязывается к состоянию хранилища, и каждый ввод пользователя сохраняется в хранилище без submit().

Ссылки по теме:

• Как настроить геттер Pinia в Vue 3 Composition API
• Доступный для записи геттер Pinia¹

¹ - необходимо использовать Программа установки хранит синтаксис, чтобы иметь "доступные для записи геттеры".