Vue Mehrzweckkomponenten?

Question

Ich habe a small app that lets you add, remove and edit recipes to a list of recipes.

Hinzufügen hat die Route /add und Bearbeiten hat die Route /edit. Ich verwende eine Komponente AddRecipe für beide Routen.

Die Komponente verhält sich einfach etwas anders, wenn die Route 'edit' enthält - d. H. Die Eingabefelder sind bereits mit den Werten gefüllt, die Sie bearbeiten.

Hier ist AddRecipeForm.vue, die gemeinsam genutzte Komponente:

<template> 
    <div> 
     <form class="form"> 
      <input v-model="recipe.name" placeholder="Recipe Name"> 
      <textarea v-model="recipe.description" placeholder="Recipe Description..." rows="10"></textarea> 
      <button :disabled="nothingEntered()" @click.prevent="addRecipe">Submit</button> 
     </form> 
    </div> 
</template> 

<script> 
export default { 
    name: 'AddRecipeForm', 
    data() { 
     return { 
      recipe: this.isEdit() 
      ? this.$store.state.recipes[this.$route.params.id] 
      : { 
       name: '', 
       description: '' 
      } 
     } 
    }, 
    methods: { 
     isEdit() { 
      return this.$route.path.includes('edit') 
     }, 
     addRecipe() { 
      if (this.isEdit()) { 
       this.$store.dispatch('addRecipe', this.recipe) 
      } else { 
       this.$store.dispatch('addRecipe', { 
        id: Date.now(), 
        ...this.recipe 
       }) 
      } 
      this.$router.push('/') 
     }, 
     nothingEntered() { 
      return !this.recipe.name || !this.recipe.description 
     } 
    }, 
} 
</script> 

ich es denke sind bessere Lösungen für dieses Problem. Was ist zum Beispiel, wenn später im Projekt weitere Sichten benötigt werden, für die auch die Komponente benötigt wird? Ich kann die Route in der Komponente nicht überprüfen, wenn ich eine sauber lesbare, wiederverwendbare Komponente möchte.

Was ist Ihre bevorzugte Vorgehensweise bei Routen, die die gleiche Ansicht erfordern?

Answer 1

Wenn Sie es von single responsibility betrachten, welcher Zustand, wenn Sie 2 Gründe haben, für eine Klasse zu ändern (Komponente in Ihrem Fall), müssen Sie die Funktionalität in zwei Klassen aufteilen. als könnte es wie eine überladene Komponente scheinen.

Bei gegebener Simplizität der Logik scheint es jedoch eine schöne Lösung zu sein, bis Sie die Logik in eine Funktion wie isEdit einbinden können, aber wenn mehr verschiedene Arten von Prüfungen ins Bild kommen, können Sie zwei oder mehrere separate Komponenten erstellen wie AddRecipeForm/EditRecipeForm etc jede einzelne Sache tun.

Answer 2

Eine übliche Technik, wenn man zu viele if s erhält, ist die Verwendung einer Konfigurationskarte (ich habe diesen Satz oben gemacht), z.

data() { 
    return { 
     configMap: { 
      add: { 
       addRecipe: function() {}, 
       inputDisabled: false 
      }, 
      edit: { 
       addRecipe: function() {}, 
       inputDisabled: false 
      }, 
      view: { 
       addRecipe: function() {}, 
       inputDisabled: true 
      } 
     } 
    } 
} 

hier bilden wir die Bedingung, die ein Segment der Route Weg ist, um Optionen, die wir direkt in dieser Komponente verwenden können, so können wir dann in Vorlage :disabled=configMap[routeType].inputDisabled schreiben.

Und in vue, können wir inputDisabled in computed, addRecipe in methods legen sie deutlicher zu erklären, wie Sie gerade oben tat.

Und wenn die Art der add, edit über Strecken gehen, können wir die Art als prop und gebe es in (als Konfigurationsoption, so wie wir jede andere wiederverwendbar Komponente)

definieren