Pinia Store状态与v-model双向绑定：最佳实践与常见陷阱

import { defineStore } from 'pinia';

export const useUserStore = defineStore('userStore', {
  state: () => ({
    formsResponses: {
      form1: {
        input1: '',
      },
    },
  }),
  getters: {
    // Getter通常是只读的，这里为了演示，我们聚焦于state的直接绑定
    // getFormsInput: (state) => state.formsResponses.form1,
  },
  actions: {
    // 动作用于修改状态，但storeToRefs直接绑定state时，v-model会绕过action直接修改state
    // setFormsResponses(formResponses) {
    //   this.formsResponses.form1 = formResponses;
    // },
  },
});

<template>
  <input type="text" name="input_form" v-model="form1.input1" />
  <button type="Primary" @click="submit">提交</button>
  <p>Store中的值: {{ form1.input1 }}</p>
</template>

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

const userStore = useUserStore();
// 使用 storeToRefs 将 formsResponses.form1 转换为响应式 ref
const { formsResponses } = storeToRefs(userStore);

// 为了方便在模板中使用，我们可以进一步解构或直接使用 formsResponses.form1
const form1 = formsResponses.value.form1; // 此时 form1 也是一个响应式对象，其属性可以直接被 v-model 绑定

function submit() {
  console.log('提交的值:', form1.input1); // 直接访问响应式对象
}
</script>

import { defineStore } from 'pinia';

export const useUserStore = defineStore('userStore', {
  state: () => ({
    formsResponses: {
      form1: {
        input1: '',
      },
    },
  }),
  actions: {
    updateForm1Input1(newValue) {
      // 可以在这里添加验证或其他逻辑
      this.formsResponses.form1.input1 = newValue;
      console.log('Store已更新:', this.formsResponses.form1.input1);
    },
  },
});

<template>
  <input type="text" name="input_form" v-model="formInput1" />
  <button type="Primary" @click="submit">提交</button>
  <p>Store中的值: {{ userStore.formsResponses.form1.input1 }}</p>
</template>

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

const userStore = useUserStore();

// 创建一个可写的计算属性来双向绑定
const formInput1 = computed({
  get() {
    return userStore.formsResponses.form1.input1;
  },
  set(newValue) {
    // 当 v-model 尝试更新值时，调用 Store 的 action
    userStore.updateForm1Input1(newValue);
  },
});

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

import { defineStore } from 'pinia';

export const useUserStore = defineStore('userStore', {
  state: () => ({
    formsResponses: {
      form1: {
        input1: '初始值', // 设定一个初始值
      },
    },
  }),
  actions: {
    // 接收一个完整的表单对象来更新
    updateForm1(formObject) {
      this.formsResponses.form1 = { ...formObject }; // 使用展开运算符确保响应性
      console.log('Store已通过本地状态更新:', this.formsResponses.form1.input1);
    },
  },
});

<template>
  <input type="text" name="input_form" v-model="localForm.input1" />
  <button type="Primary" @click="submit">提交到Store</button>
  <button type="Secondary" @click="reset">重置本地表单</button>
  <p>本地表单值: {{ localForm.input1 }}</p>
  <p>Store中的值: {{ userStore.formsResponses.form1.input1 }}</p>
</template>

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

const userStore = useUserStore();

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

// 组件挂载时，从Store加载初始数据到本地表单
onMounted(() => {
  // 使用展开运算符复制Store的状态，避免直接引用导致本地修改立即影响Store
  localForm.value = { ...userStore.formsResponses.form1 };
});

function submit() {
  // 将本地表单数据提交到Store
  userStore.updateForm1(localForm.value);
}

function reset() {
  // 重置本地表单为Store中的当前值
  localForm.value = { ...userStore.formsResponses.form1 };
}
</script>