Pinia Store状态与表单v-model双向绑定的策略

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

export const useUserStore = defineStore('userStore', {
  state: () => ({
    form1: {
      input1: '',
      // 更多表单字段...
    },
  }),
  actions: {
    setForm1Input1(value) {
      this.form1.input1 = value;
    },
    // 如果需要更新整个form1对象
    updateForm1(payload) {
      this.form1 = { ...this.form1, ...payload };
    },
  },
});

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

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

const userStore = useUserStore();
// 使用 storeToRefs 解构 store 的 state，使其保持响应性
const { form1 } = storeToRefs(userStore);

function submit() {
  console.log('提交的值:', form1.value.input1);
  // 此时 form1.input1 已经自动更新了 store 的状态
  // userStore.form1.input1 也会是最新值
}
</script>

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

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

const userStore = useUserStore();

// 创建一个可写计算属性
const computedInput = computed({
  get() {
    // 从 store 读取值
    return userStore.form1.input1;
  },
  set(newValue) {
    // 将新值写入 store
    // 可以进行数据转换或验证
    console.log('新值写入Store:', newValue);
    userStore.setForm1Input1(newValue); // 通过 action 更新
    // 或者直接修改状态: userStore.form1.input1 = newValue;
  }
});

function submit() {
  console.log('提交的值:', userStore.form1.input1);
}
</script>

<!-- components/Form3.vue -->
<template>
  <div>
    <label for="input_form_local">输入内容 (本地状态):</label>
    <input type="text" id="input_form_local" name="input_form_local" v-model="localForm.input1" />
    <p>本地状态中的值: {{ localForm.input1 }}</p>
    <p>Store中的值: {{ userStore.form1.input1 }}</p>
    <button @click="submitLocal">提交到Store</button>
    <button @click="resetLocal">重置本地状态</button>
  </div>
</template>

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

const userStore = useUserStore();

// 初始化本地表单状态，从 Store 获取初始值
const localForm = ref({ ...userStore.form1 });

// 监听 Store 状态变化，同步到本地状态（可选，取决于需求）
// 如果希望在 Store 外部发生变化时更新本地表单，可以使用 watch
watchEffect(() => {
  // 确保当 store.form1 变化时，localForm 也同步更新
  // 注意：这里是浅拷贝，如果 form1 内部有深层嵌套对象，需要深拷贝
  localForm.value = { ...userStore.form1 };
});


function submitLocal() {
  // 仅在提交时更新 Store
  userStore.updateForm1(localForm.value);
  console.log('本地状态提交到Store:', localForm.value.input1);
}

function resetLocal() {
  // 重置本地状态为 Store 中的当前值
  localForm.value = { ...userStore.form1 };
  console.log('本地状态已重置。');
}
</script>