Pinia Store状态与v-model双向绑定：实现可写表单输入的多种策略

<!-- Form1.vue (错误示例) -->
<template>
  <input type="text" name="input_form" v-model="responses.input1"/>
  <button type="Primary" @click="submit">submit</button>
</template>

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

const userStore = useUserStore();

// responses 是一个只读的计算属性，无法直接修改其内部属性来更新store
const responses = computed(() => userStore.getFormsInput);

// 尝试修改 responses.value.input1 是无效的，因为它不具备setter
// reponses.value.input1 = input.value; // 这行代码不会更新store

function submit() {
  console.log(responses.value.input1); // 此时输出的仍是store中的原始值
}
</script>

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

export const userResponses = {
  formsResponses: {
    form1: {
      input1: '', // 确保这是可直接修改的状态属性
    },
  },
};

export const useUserStore = defineStore('userStore', {
  state: () => userResponses, // 直接返回可修改的状态对象

  getters: {
    // getFormsInput: (state) => state.formsResponses.form1, // 如果需要getter，它仍是只读的
  },
  actions: {
    // 如果需要通过action更新，可以定义
    setForm1Input(value) {
      this.formsResponses.form1.input1 = value;
    },
  },
});

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

<script setup>
import { useUserStore } from '@/store/userStore';
import { storeToRefs } from 'pinia'; // 从pinia导入 storeToRefs

const userStore = useUserStore();

// 使用 storeToRefs 将 store 的 state 属性转换为 ref
// 这里的 formsResponses 是一个 ref，其内部属性 form1 也是响应式的
const { formsResponses } = storeToRefs(userStore);

// 现在，formsResponses.value.form1 可以直接用于 v-model
// 我们可以进一步解构出 form1
const form1 = formsResponses.value.form1; // 或者直接在模板中使用 formsResponses.form1.input1

function submit() {
  console.log(form1.input1); // 此时会输出输入框的最新值，并已同步到store
  // 或者 console.log(userStore.formsResponses.form1.input1);
}
</script>

<!-- Form1.vue -->
<template>
  <input type="text" name="input_form" v-model="formInput1"/>
  <button type="Primary" @click="submit">submit</button>
</template>

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

const userStore = useUserStore();

// 定义一个可写计算属性
const formInput1 = computed({
  get() {
    // 从 store 中获取当前值
    return userStore.formsResponses.form1.input1;
  },
  set(newValue) {
    // 当 v-model 更新时，通过 action 或直接修改 store 状态
    // userStore.setForm1Input(newValue); // 如果有 action 可以这样调用
    userStore.formsResponses.form1.input1 = newValue; // 直接修改状态
  }
});

function submit() {
  console.log(formInput1.value); // 输出最新值
}
</script>

<!-- Form1.vue -->
<template>
  <input type="text" name="input_form" v-model="localForm.input1"/>
  <button type="Primary" @click="submit">提交</button>
  <button type="Secondary" @click="reset">重置</button>
</template>

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

const userStore = useUserStore();

// 定义本地表单状态
const localForm = reactive({
  input1: ''
});

// 组件挂载时，从 store 初始化本地状态
onMounted(() => {
  // 注意：这里使用解构赋值，避免直接引用导致本地状态与store状态的意外关联
  Object.assign(localForm, { ...userStore.formsResponses.form1 });
});

// 提交按钮逻辑：将本地状态更新到 store
function submit() {
  // 通过 action 或直接修改 store 状态
  // userStore.setForm1(localForm); // 如果 store 有一个 action 来更新整个 form1
  userStore.formsResponses.form1.input1 = localForm.input1;
  console.log("表单已提交，Store已更新:", userStore.formsResponses.form1.input1);
}

// 重置按钮逻辑：将本地状态恢复为 store 中的值
function reset() {
  Object.assign(localForm, { ...userStore.formsResponses.form1 });
  console.log("表单已重置为Store值");
}
</script>