在 Vue 3 中使用 Pinia 实现表单输入与 Store 的双向绑定

import { defineStore } from 'pinia';

export const useUserStore = defineStore('userStore', {
  state: () => ({
    formsResponses: {
      form1: {
        input1: '',
      },
    },
  }),
  getters: {
    // 假设您确实需要一个 getter，但请注意 getter 默认是只读的
    getForm1Input: (state) => state.formsResponses.form1.input1,
  },
  actions: {
    setForm1Input(value) {
      this.formsResponses.form1.input1 = value;
    },
    // 如果需要更新整个 form1 对象
    setForm1Responses(formResponses) {
      this.formsResponses.form1 = { ...this.formsResponses.form1, ...formResponses };
    },
  },
});

<template>
  <div>
    <label for="input_form">输入框:</label>
    <input type="text" id="input_form" v-model="form1.input1" />
    <p>Store 中的值: {{ userStore.formsResponses.form1.input1 }}</p>
    <button @click="submit">提交</button>
  </div>
</template>

<script setup>
import { useUserStore } from '@/stores/userStore';
import { storeToRefs } from 'pinia';

const userStore = useUserStore();

// 使用 storeToRefs 解构 formsResponses.form1，使其保持响应性
// 此时 form1 是一个 ref 对象，其 .value 对应 formsResponses.form1
const { formsResponses } = storeToRefs(userStore);
const form1 = formsResponses.value.form1; // 直接使用 form1 对象进行 v-model 绑定

function submit() {
  console.log('提交的值:', form1.input1);
  // 或者直接访问 store
  console.log('Store 中的最终值:', userStore.formsResponses.form1.input1);
}
</script>

<template>
  <div>
    <label for="input_form_computed">输入框 (可写计算属性):</label>
    <input type="text" id="input_form_computed" v-model="computedInput" />
    <p>Store 中的值: {{ userStore.formsResponses.form1.input1 }}</p>
    <button @click="submitComputed">提交</button>
  </div>
</template>

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

const userStore = useUserStore();

// 创建一个可写计算属性
const computedInput = computed({
  get() {
    // 从 Store 的状态中读取值
    return userStore.formsResponses.form1.input1;
  },
  set(newValue) {
    // 当 v-model 尝试写入时，调用 Store 的 action 或直接修改 state
    // 这里我们直接修改 state，也可以调用 action: userStore.setForm1Input(newValue);
    userStore.formsResponses.form1.input1 = newValue;
    // 可以在此处添加验证或数据转换逻辑
    console.log('值已更新到 Store:', newValue);
  },
});

function submitComputed() {
  console.log('提交的值 (通过可写计算属性):', computedInput.value);
}
</script>

<template>
  <div>
    <label for="input_form_local">输入框 (局部状态):</label>
    <input type="text" id="input_form_local" v-model="localInput" />
    <p>局部状态中的值: {{ localInput }}</p>
    <p>Store 中的值 (未提交): {{ userStore.formsResponses.form1.input1 }}</p>
    <button @click="submitLocal">提交到 Store</button>
  </div>
</template>

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

const userStore = useUserStore();

// 初始化局部状态，可以从 Store 中加载初始值
const localInput = ref('');

onMounted(() => {
  // 在组件挂载时，从 Store 加载初始值到局部状态
  localInput.value = userStore.formsResponses.form1.input1;
});

function submitLocal() {
  // 仅在提交时更新 Store
  userStore.setForm1Input(localInput.value);
  console.log('局部状态已提交到 Store:', localInput.value);
}
</script>