하위 구성 요소와 함께 Vuex를 사용하는 올바른 방법

하위 구성 요소와 함께 Vuex를 사용하는 올바른 방법

이전에 VueJ와 Vuex를 사용한 적이 있습니다.제작이 아니라 간단한 개인 프로젝트를 위해 직접 제작했습니다.

그러나 지금은 조금 더 복잡한 문제에 직면해 있지만 Vuex를 사용하는 것은 이미 훨씬 더 복잡하다고 느끼고 있습니다.그래서 저는 여기서 몇 가지 지침을 찾고 있습니다.

메인 뷰에서 사용자에게 카드 목록을 제공합니다.카드는 약 10개의 속성(입력, 선택 등)으로 이루어진 편집 가능한 형식입니다.리스트 뷰에 반복되어 있기 때문에, 이 카드의 컴포넌트를 실장하고 있는 것은 확실합니다.나의 첫 번째 순진한 접근법은 내 가게에서 (폼이라고 부르자) 목록을 가져와v-for해당 양식 목록의 각 양식에 대한 카드를 제시합니다.양식은 하위 구성 요소에 속성으로 전달됩니다.

이제 폼 컨트롤을 속성에 바인딩합니다.이를 위해 저장 돌연변이를 적절히 활용하기 위해 양방향 계산 속성을 구현했습니다.그러나 모델의 모든 속성에 대해 getter와 setter + mutation을 사용하여 커스텀 계산 속성을 구현하는 것은 매우 반복적인 작업입니다.또한 폼은 제 주(州)의 어레이입니다.모든 돌연변이에 스토어에서 편집할 폼의 ID를 전달해야 합니다.

또 다른 점은 폼의 스토어 ID를 아이 컴포넌트에 전달하고 모델의 모든 속성에 대해 "id별" 게터 및 일치하는 변환이 있다는 것입니다.하지만 이것도 제대로 된 방법이 아닌 것 같아요.본질적으로는 똑같지?!

이 문제에 대한 더 나은 해결책이 있을까요?제가 뭔가를 놓쳤거나 너무 복잡하게 만들고 있는 것 같아요

잘라낸 예:

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-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);
  }
}

이건 필요한 것보다 훨씬 더 복잡해...하지만 그것은 효과가 있다.

언급URL : https://stackoverflow.com/questions/65417583/proper-way-to-use-vuex-with-child-components