Стоит ли реализовывать умные компоненты?

Question

[Игорь]

Стоит ли реализовывать умные компоненты?
Или как не напороться на боль.

Изучив некоторые рекомендации VUE и то что я нашёл в интернете.

Есть такое понятие как умные и глупые компоненты.

Глупые компоненты не зависят от логики основного приложения.
Умные компоненты, это собственно страницы, которые жёстко привязаны к проекту и много от чего зависят.

Мой вопрос заключается в том, как организовать реализацию умных компонентов (не страниц) и стоит ли так делать?
Например, в моём приложении, часто встречается одна и та же логика одного компонента.
Это Autocomplete, который должен в зависимости от введённых данных загружать список.
Согласитесь, было бы нелогично в десяти местах реализовывать один и тот же механизм.

Поначалу я так и сделал, реализовав всё это дело непосредственно в папке components, а потом понял что, совершил ошибку и мне не стоило там реализовывать логику загрузки данных.
Это нужно сделать как-то иначе.

Я понимаю, что вопрос тривиальный, хотелось бы услышать совета по поводу организации (умных, глупых).

Comments

[Игорь]

Если говорить о структуре, то примерно я вижу так.

src
____components
____snippets
____views

В snippets будут лежать компоненты, которые реализуют логику и жёстко привязаны к проекту.
В свою очередь, они могут использовать компоненты из папки components но не наоборот.

[Игорь]

Собственно пример умного компонента (так называемый сниппет)

<template>
  <v-autocomplete
    v-model="selected"
    :items="groups"
    :search-input.sync="groupsSearchQuery"
    no-filter
    persistent-hint
    :label="label"
    :rules="rules"
    :loading="loading"
  >
    <template
      v-slot:prepend
      v-if="visibleIcon && ['lg', 'md'].includes($vuetify.breakpoint.name)"
    >
      <v-icon class="pl-5 pr-9">mdi-account-group</v-icon>
    </template>
    <template v-slot:selection="{ item }">
      <v-list-item-content>
        <v-list-item-title>{{ item.name }}</v-list-item-title>
        <v-list-item-subtitle v-if="item.organization">{{ item.organization.name }}</v-list-item-subtitle>
      </v-list-item-content>
    </template>
    <template v-slot:item="{ item }">
      <v-list-item-content>
        <v-list-item-title>{{ item.name }}</v-list-item-title>
        <v-list-item-subtitle v-if="item.organization">{{ item.organization.name }}</v-list-item-subtitle>
      </v-list-item-content>
    </template>
  </v-autocomplete>
</template>

<script lang="ts">
import Vue from 'vue'
import { debounce } from 'vuetify/src/util/helpers'
import { GroupInterface, Groups } from '@/api/Groups'

export default Vue.extend({
  name: 'SAutocompleteGroups',
  model: {
    prop: 'selected',
    event: 'change'
  },
  props: {
    selectedId: {
      type: Number,
      default: 0
    },
    search: {
      type: String,
      default: ''
    },
    rules: {
      type: Array,
      default: undefined
    },
    visibleIcon: {
      type: Boolean,
      default: false
    },
    label: {
      type: String,
      default: ''
    }
  },

  data () {
    return {
      loading: false,
      selectOnce: false,
      selected: null,
      groupsSearchQuery: null as null | string,
      groupsProcessLoading: false,
      groupsSearchDebounce: debounce((q: string, context: any) => {
        context.loading = true
        new Groups()
          .find(q, 0, 10)
          .then((items: GroupInterface[]) => {
            context.groups = items

            if (!context.selectOnce) {
              context.selectOnce = true
              context.selected = context.groups.find((e: GroupInterface) => e.id === context.selectedId)
            }
          }).finally(() => {
            context.loading = false
          })
      }, 400),
      groups: []
    }
  },

  watch: {
    selected (value) {
      this.$emit('change', value)
    },

    groupsSearchQuery (val: string) {
      this.groupsSearchDebounce(val, this)
    }
  },

  created () {
    this.groupsSearchQuery = this.search
  }
})
</script>

[Михаил]

Игорь, не думаю что имеет значение в какой папке находится компонент, в smart/dumb речь про 1 место управление данными, которые потом просто прокидываются "вниз" по дереву

Answer 1

[Денис Инешин]

Вы просто столкнулись с общей проблемой переиспользования кода.
Конечно хочется писать код один раз и избегать копипасты, но не всегда этого легко достичь.

Побороть эту проблему может только грамотное планирование структуры програмы. Далеко не всегда можно достичь нужного результата с первого раза, приходится делать рефакторинг.

Вот несколько принципов:
- старайтесь разбивать программу на компотенты.
- чем меньше и проще компонеты, тем проще их переиспользовать и проще с ними работать.
- используйте миксины когда вам нужно переиспользовать логику и нельзя вынести ее в отдельный компонент.
- разные вычисления можно вообще вынести в отдельные файлы в папку assets

Comments

[Саша Железовский]

Миксины это злодеяние