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

获取if太多的一种常见技巧是使用配置图（我将这个词组用起来），例如。

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

这里我们将条件（路径路径的一部分）映射到我们可以在此组件中直接使用的选项，因此我们可以在模板:disabled=configMap[routeType].inputDisabled中写入。

在vue中，我们可以将inputDisabled放在computed，addRecipe methods中，以便更清楚地声明它们，就像您上面所做的那样。

如果add，edit的类型超出路由，我们可以将类型定义为prop并将其传入（作为配置选项，就像我们任何其他可重用的组件一样）

Answer 2

如果从single responsibility查看它，如果您有两个理由要更改某个类（在您的情况下为组件），则必须将该功能拆分为两个类。而不是看起来像一个重载的组件。

然而，考虑到当前简单的逻辑，这似乎是一个很好的解决方案，直到你可以将逻辑包装在像isEdit这样的函数中，但如果有更多不同类型的检查进入图片，你可以创建两个或多个单独的组件，如AddRecipeForm / EditRecipeForm等，每个组件都做单一事情。

Vue多功能组件？

2 个答案: