如何在Vue 3 Pinia中正确实现v-model与Store状态的双向绑定

// store/userStore.js
import { defineStore } from 'pinia';

export const useUserStore = defineStore('userStore', {
  state: () => ({
    form1: {
      input1: '',
      input2: '',
    },
    // 其他表单响应...
  }),
  getters: {
    // 这是一个只读的getter，不能直接用于v-model
    getForm1Data: (state) => state.form1,
  },
  actions: {
    // 用于更新form1.input1的方法
    setForm1Input1(value) {
      this.form1.input1 = value;
    },
    // 用于更新整个form1对象的方法
    updateForm1(payload) {
      this.form1 = { ...this.form1, ...payload };
    },
  },
});

<template>
  <div>
    <h3>使用 storeToRefs</h3>
    <input type="text" v-model="form1.input1" placeholder="输入内容会直接更新Store" />
    <p>Store中的 form1.input1: {{ form1.input1 }}</p>
    <button @click="submitForm">提交 (仅演示，实际已实时更新)</button>
  </div>
</template>

<script setup>
import { storeToRefs } from 'pinia';
import { useUserStore } from '@/store/userStore'; // 假设路径为 '@/store/userStore'

const userStore = useUserStore();
// 使用 storeToRefs 将 userStore 的 state 属性转换为 ref
// 这样 form1 就可以直接用于 v-model
const { form1 } = storeToRefs(userStore);

function submitForm() {
  console.log('当前 Store 中的 form1.input1:', form1.value.input1);
  alert('数据已实时更新到 Store: ' + form1.value.input1);
}
</script>

<template>
  <div>
    <h3>使用可写计算属性</h3>
    <input type="text" v-model="computedInput1" placeholder="输入内容会通过setter更新Store" />
    <p>Store中的 form1.input1: {{ userStore.form1.input1 }}</p>
    <button @click="submitForm">提交 (通过setter实时更新)</button>
  </div>
</template>

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

const userStore = useUserStore();

// 创建一个可写的计算属性，用于双向绑定 form1.input1
const computedInput1 = computed({
  get() {
    // 从 Store 中获取值
    return userStore.form1.input1;
  },
  set(newValue) {
    // 当 v-model 尝试更新值时，通过 Pinia action 更新 Store
    // 可以在这里添加数据校验或转换逻辑
    if (newValue.length < 10) { // 示例：简单校验
      userStore.setForm1Input1(newValue.toUpperCase()); // 示例：转换为大写
    } else {
      console.warn('输入过长，未更新');
    }
  },
});

function submitForm() {
  console.log('当前 Store 中的 form1.input1:', userStore.form1.input1);
  alert('数据已通过可写计算属性实时更新到 Store: ' + userStore.form1.input1);
}
</script>

<template>
  <div>
    <h3>管理局部表单状态</h3>
    <input type="text" v-model="localForm.input1" placeholder="输入内容会更新局部状态" />
    <p>局部状态中的 input1: {{ localForm.input1 }}</p>
    <p>Store中的 form1.input1: {{ userStore.form1.input1 }}</p>
    <button @click="submitLocalForm">提交到 Store</button>
    <button @click="resetLocalForm">重置局部状态</button>
  </div>
</template>

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

const userStore = useUserStore();

// 从 Store 初始化局部表单状态
// 使用深拷贝确保局部状态与 Store 状态相互独立
const localForm = ref({ ...userStore.form1 });

// 监听 Store 状态变化，同步到局部状态 (可选，取决于需求)
// watch(() => userStore.form1, (newVal) => {
//   localForm.value = { ...newVal };
// }, { deep: true });

function submitLocalForm() {
  // 仅在提交时更新 Store
  userStore.updateForm1(localForm.value);
  alert('局部状态已提交到 Store: ' + localForm.value.input1);
}

function resetLocalForm() {
  // 将局部状态重置为 Store 中的当前值
  localForm.value = { ...userStore.form1 };
  alert('局部状态已重置');
}
</script>