将 Vuex 与子组件一起使用的正确方法答案

【问题标题】：Proper way to use Vuex with child components将 Vuex 与子组件一起使用的正确方法
【发布时间】：2021-04-01 16:21:21
【问题描述】：

我以前用过 VueJS 和 Vuex。不是在生产中，只是为了一些简单的个人项目，感觉很简单。

然而，现在我面临一个稍微复杂一点的问题，但使用 Vuex 已经感觉更复杂了。所以我在这里寻找一些指导。

在主视图中，我向用户展示了一张卡片列表。卡片是大约十个属性（输入、选择等）的可编辑形式。我显然为这些卡片实现了一个组件，因为它们在列表视图中重复出现。我的第一个天真的方法是从我的商店中获取一个列表——我们称之为表单——然后使用v-for 为该表单列表中的每个表单提供一张卡片。表单作为属性传递给子组件。

现在我想将表单控件绑定到属性。为此，我实施了Two-way Computed Properties 以正确利用我的商店突变。但是，使用 getter 和 setter 以及我模型上每个属性的突变来实现自定义计算属性感觉非常重复。此外，表格在我的状态下是一个数组。所以我必须将要在商店中编辑的表单的 id 传递给每个突变。

我想到的其他事情只是将表单的商店 ID 传递给子组件，并为我的模型的每个属性以及匹配的突变提供“by id”getter。但这也不是正确的方法。本质上是一样的吧？！

这个问题有更好的解决方案吗？也许我只是遗漏了一些东西，或者我把事情复杂化了。

一个精简的例子：

Editor.vue:

<template>
  <v-container>
    <EditableCard v-for="(card, i) in cards" :key="i" :card="card" />
  </v-container>
</template>

<script>
import EditableCard from "@/components/EditableCard";

import { mapGetters } from "vuex";

export default {
  name: "Editor",

  components: {
    EditableCard
  },

  computed: {
    ...mapGetters("cards", {
      cards: "list"
    })
  }
};
</script>

EditableCard:

<template>
  <v-card>
    <v-form>
      <v-card-title>
        <v-text-field v-model="title"></v-text-field>
      </v-card-title>

      <v-card-text>
        <v-text-fieldv-model="text"></v-text-field>
        <!-- And some more fields... -->
      </v-card-text>
    </v-form>
  </v-card>
</template>

<script>
import { mapMutations } from "vuex";

export default {
  name: "EditableCard",

  props: {
    card: Object
  },

  computed: {
    title: {
      get() {
        return card.title;
      },
      set(value) {
        this.setCardTitle(this.card.id, value);
      }
    },

    text: {
      get() {
        return card.text;
      },
      set(value) {
        this.setCardText(this.card.id, value);
      }
    }

    // Repeat for every form input control
  },

  methods: {
    ...mapMutations("cards", {
      setCardTitle: "setTitle",
      setCardText: "setText"

      // Repeat for every form input control
    })
  }
};
</script>

【问题讨论】：

您希望您的表单能够实时编辑，或者在按下“保存”按钮后立即更改？
你能提供你所描述的最基本的例子吗？
实时。这就是为什么我尝试将 v-model 与计算属性一起使用。但是用 Vuex 进行映射感觉有点多余。
每当任何字段发生变化时，使用索引并在一个计算设置器中设置整个表单对象

标签： vue.js vue-component vuex

【解决方案1】：

使用克隆为整个表单对象创建一个计算设置器会很好，但这不起作用，因为更改不会触发计算设置器。

^{如果有人想探索这个有趣的失败，see here)}

要解决此问题，您可以使用监视和数据克隆：

<v-form>
  <v-text-field v-model="clone.title" />
  <v-text-field v-model="clone.text" />
</v-form>

props: ['index', 'card'],
data() {
  return {
    clone: {}
  }
},
watch: {
  card: {
    handler(card) {
      this.clone = { ...card }
    },
    immediate: true,
    deep: true
  },
  clone: {
    handler(n,o) {
      if (n === o) {
        this.$store.commit('SET_CARD', { index: this.index, card: n })
      }
    },
    deep: true
  }
}

你的v-for：

<EditableCard v-for="(card, index) in cards" :card="card" :index="index" :key="index" />

突变：

mutations: {
  SET_CARD(state, { index, card }) {
    Vue.set(state.cards, index, card);
  }
}

这比它应该需要的复杂得多......但它确实有效。

【讨论】：