Повторное использование компонентов и поддержание состояния с Vue

Question

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

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

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

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

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

Для одного из моих приложений я упростил следующее структура компонента:

Root Component
    Grid
        Card
            FilterDropdown
            Graph

В настоящее время я передаю данные в свой компонент root из API, а затем передаю их компоненту Graph через реквизиты на каждом этапе.

С другой стороны Кроме того, мой FilterDropdown получает отдельный список одного из столбцов данных и предоставляет раскрывающийся список, в котором пользователь может выбрать значение. Затем эти значения передаются 3 раза обратно в дерево в компонент root, где он используется для фильтрации данных через вычисленное свойство, которое затем передается снова с использованием тех же параметров.

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

Answer 1

Если приложение передает реквизиты несвязанным компонентам или становится утомительно поддерживать цепочку реквизит / излучение через нескольких потомков, то, вероятно, самое время использовать одну из упомянутых вами опций. Из документов Vuex:

проходящие реквизиты могут быть утомительными для глубоко вложенных компонентов и просто не работают для родственных компонентов.

Если архитектура не так сложна, вероятно, переключаться не нужно. Но если есть ...

Модули Vuex

Поскольку Vuex допускает использование модулей, вы, вероятно, можете устранить вопрос о том, отрицательно ли это влияет на возможность повторного использования компонентов. Вы можете думать о компоненте (ах) + их выделенных модулях Vuex как о пакете. Модуль Vuex может инкапсулировать все необходимые функции хранилища, не затрагивая какую-либо часть хранилища приложения, которое его использует.

Плагины

Вы даже можете создать подключите к этим компонентам и используйте dynamici c регистрация модуля до зарегистрируйте связанный с ним модуль Vuex в существующем магазине приложения.

Вы можете сделать что-нибудь аналогично плагину и шине событий.

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