Vue3基于Vuex状态数组生成computed数组适配v-model双向绑定问题

现有实现的问题 #

你用带get/set的computed对接Vuex读写的思路是正确的，用map生成computed数组的方案也可行，绑定失效是两个实现细节问题导致的：

• questionComputeds 是普通JS数组，仅在组件初始化时执行一次map生成，若后续store中questions数组长度变化（新增/删除题目），questionComputeds不会自动同步更新
• Vue3模板仅会自动解包顶层的ref响应式变量，嵌套在普通数组/对象中的ref不会自动解包，你直接写v-model="questionComputeds[index]"实际绑定的是computed ref对象本身，而非它的value属性，因此双向绑定失效

两种可行实现方案 #

方案1：最小改动修复现有代码

只需要调整两处代码即可正常运行：

1. 将questionComputeds改为响应式computed，确保store的questions变化时能同步更新
2. 模板绑定时手动加.value解包嵌套的computed ref

修改后的完整代码：

<template>
    <div v-for="(question, index) in questions" :key="index">
        <label :for="'q'+index">{{question.text}}</label>
        <!-- 手动解包两层ref：外层是questionComputeds本身，内层是数组里的computed项 -->
        <input :id="'q'+index" v-model="questionComputeds.value[index].value" type="checkbox" />
    </div>
</template>

<script setup>
import { computed } from 'vue';
import { useStore } from 'vuex';

const store = useStore();
const questions = computed(() => store.state.questions);

// 改为computed，依赖store.state.questions自动更新
const questionComputeds = computed(() => {
  return store.state.questions.map((q, i) =>
    computed({
        get() {
             return store.state.questions[i].value;
        },
        set(value) {
             store.commit('updateQuestionValue', { index: i, value });
        },
    })
  )
});
</script>

方案2：拆分子组件（更推荐）

如果数组规模较大、后续需要扩展功能，建议把单个复选框拆为独立子组件，避免数组嵌套ref的解包问题，代码可维护性更高：

1. 子组件QuestionCheckbox.vue

<template>
  <div>
    <label :for="`q${index}`">{{ question.text }}</label>
    <input :id="`q${index}`" v-model="checked" type="checkbox" />
  </div>
</template>
<script setup>
import { computed } from 'vue'
import { useStore } from 'vuex'

const props = defineProps(['index', 'question'])
const store = useStore()

const checked = computed({
  get() {
    return store.state.questions[props.index].value
  },
  set(value) {
    store.commit('updateQuestionValue', { index: props.index, value })
  }
})
</script>

2. 父组件调用

<template>
  <QuestionCheckbox 
    v-for="(question, index) in questions" 
    :key="index"
    :index="index"
    :question="question"
  />
</template>
<script setup>
import { computed } from 'vue'
import { useStore } from 'vuex'
import QuestionCheckbox from './QuestionCheckbox.vue'

const store = useStore()
const questions = computed(() => store.state.questions)
</script>

内容的提问来源于stack exchange，提问作者WillD