从 vuex 状态数组生成计算属性数组以用于 v-model

Question

我在 Vue 3 中有以下设置。

将数组作为状态一部分的 vuex 存储：

const store = createStore({
  state: {
    questions: [
      { text: 'A', value: false },
      { text: 'B', value: false },
      { text: 'C', value: true },
    ],
  },
  mutations: {
    updateQuestionValue(state, { index, value }) {
      state.questions[index].value = value;
    },
  },
});

还有一个组件，它试图呈现一个复选框列表，该列表应该对应于 state 中的“questions”数组。

<template>
    <div v-for="(question, index) in questions">
        <label :for="'q'+index">{{question.text}}</label>
        <input :id="'q'+index" v-model="questionComputeds[index]" type="checkbox" />
    </div>
</template>

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

const store = useStore();

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

const questionComputeds = store.state.questions.map((q, i) =>
    computed({
        get() {
             return store.state.questions[i].value;
        },
        set(value) {
             store.commit('updateQuestionValue', { index: i, value });
        },
    })
);
</script>

如您所见，我希望使用 v-model 为列表中的每个输入元素制定两种方式的绑定，但是因为我将 vuex 与数组一起使用，所以我想在我的计算中使用 get/set 选项属性并使用模板中的索引访问特定的计算。但是我发现这不起作用。它不会引发错误，但也无法将复选框的值绑定到我的问题对象中的 .value 道具。我对这里的策略完全不了解吗？你甚至可以像.map() 那样制作“计算”数组吗？有什么方法可以将 v-model 与这种数据结构一起使用？

Answer 1

第一个问题：

在模板的第一行

<div v-for="(question, index) in questions">

questions 未定义。可以换成

<div v-for="(question, index) in questionComputeds">

或者在创建时传递给 store 的 questions 可以被提取到一个变量中，在你的组件中导出和导入

第二个问题：

您的第二行缺少.value

应该是

<input v-model="questionComputeds[index].value" type="checkbox" />

这两个更改应该可以解决它。考虑到你不需要 v-for 中的索引，你得到了

完整解决方案：

<template>
  <div v-for="question in questionComputeds">
    <input v-model="question.value" type="checkbox" />
  </div>
</template>

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

const store = useStore();

const questionComputeds = store.state.questions.map((q, i) =>
    computed({
      get: () => store.state.questions[i].value,
      set: (value) => { store.commit('updateQuestionValue', { index: i, value }) },
    })
);
</script>

替代方案：

简单的解决方案：

<template>
  <div v-for="(question, index) in questionComputeds">
    <input :checked="questionComputeds[index]" type="checkbox" @input="handleChange(index, $event)" />
  </div>
</template>

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

const store = useStore();

const handleChange = (i, e) => {
  store.commit('updateQuestionValue', { index: i, value: e.target.checked });
  // to verify:
  // console.log({ ...store.state.questions[i] });
}

const questionComputeds = computed(() => store.state.questions.map(q => q.value))

</script>

更复杂（但更可重用）的解决方案：

将您的复选框数组提取到单独的组件并定义自定义v-model