VUE多目的コンポーネント？

Question

私はa small app that lets you add, remove and edit recipes to a list of recipesです。

追加にはルート/addがあり、編集にはルート/editがあります。私はのためにAddRecipeと呼ばれるコンポーネントを使用しています。どちらものルートです。

ルートに'edit'が含まれていると、コンポーネントの動作がわずかに異なります。つまり、入力フィールドには編集中の値があらかじめ入力されています。私はこの問題へのよりよい解決策があります考えてい

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

：

はここで、共有コンポーネントAddRecipeForm.vueです。たとえば、コンポーネントを必要とするプロジェクトの後半に必要なビューがさらにある場合はどうなりますか？きれいで読みやすい再利用可能なコンポーネントが必要な場合、コンポーネントのルートをチェックし続けることができません。

同じビューを必要とするルートを扱う場合、どのような方法が適していますか？

Answer 1

single responsibilityから見ると、クラス（コンポーネントの場合）を変更する2つの理由がある場合は、その機能を2つのクラスに分割する必要があります。オーバーロードされたコンポーネントのように見えるかもしれません。

しかし、現時点でのロジックの簡素化を考えれば、isEditのような関数内でロジックをラップすることができるまでは良い解決策と思われますが、より多くの異なるタイプのチェックが画像に入っている場合は、​​/EditRecipeFormなど、それぞれ1つのことをしています。

Answer 2

ifが多すぎると、設定マップ（私はこのフレーズを作成しました）を使用します。ここで

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

我々は、このコンポーネントで直接使用できるオプションに、ルートパスのセグメントである状態を、マップ、私たちは、テンプレート:disabled=configMap[routeType].inputDisabledに書き込むことができます。

そしてVUEで、我々はあなたが上やったように、より明確にそれらを宣言するmethodsにcomputedでinputDisabled、addRecipeを配置することができます。

そしてaddのタイプは、editはルートを超えた場合、我々はpropようなタイプを定義し、それを渡すことができます

（ コンフィグオプションとして、ちょうど私達のような他のあらゆる 再利用可能なコンポーネント）