Vue многоцелевые компоненты?

Question

У меня есть a small app that lets you add, remove and edit recipes to a list of recipes.

У объекта есть маршрут /add и текст редактирования есть /edit. Я использую компонент под названием AddRecipe для и маршрутов.

Компонент просто ведет себя несколько иначе, если маршрут содержит 'edit' - то есть поля ввода предварительно заполнены значениями, которые вы редактируете.

Вот AddRecipeForm.vue, общий компонент:

<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> 

Я имею в виду, есть лучшие решения этой проблемы. Например, что, если в проекте больше представлений, требующихся позже, которые также требуют компонента? Я не могу продолжать проверять маршрут в компоненте, если хочу хороший чистый читаемый компонент многократного использования.

Каков ваш предпочтительный способ работы с маршрутами, требующими одного и того же вида?

Answer 1

Если вы посмотрите на него с single responsibility, в котором указано, есть ли у вас 2 причины для изменения для класса (компонента в вашем случае), вам необходимо разделить функциональность в двух классах. чем это может показаться перегруженным компонентом.

Однако, учитывая текущую упрощенность логики, это кажется хорошим решением, пока вы не сможете обернуть логику внутри функции, например, isEdit, но если на картинке имеется более различный тип проверок, вы можете создать два или несколько отдельных компонентов подобный AddRecipeForm/EditRecipeForm и т.п. каждый постановка единый предмет.

Answer 2

Один общий метод при получении слишком большого количества if s должен использовать конфигурационную карту (я сделал эту фразу вверху), например.

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

здесь мы преобразуем условие, которое является отрезок пути маршрута, чтобы параметры можно использовать непосредственно в этом компоненте, так что мы можем написать в шаблоне :disabled=configMap[routeType].inputDisabled.

И вю, мы можем разместить inputDisabled в computed, addRecipe в methods объявить их более четко, так же, как вы делали выше.

И если тип add, edit выходят за рамки маршрутов, мы можем определить тип как prop и передать его в (в качестве опции в конфигурации, так же, как мы бы любой другой многоразовые компонент)