Когда большинство людей впервые начинают работать с Vuex, первое, что они хотят знать, — какие данные должны храниться в нем? В процессе дачи ответа на этот вопрос многие люди (и я в том числе) впервые подошли к этапу «все вставить». Но после преодоления первого препятствия вы быстро понимаете, что это не идеальное решение для управления данными в приложении Vue.js.
В этой статье я постараюсь ответить на такие вопросы, как «где Vuex — хорошее решение» и «когда лучше поступить иначе».
I. Во-первых, зачем использовать Vuex?
Vue.js дает нам отзывчивостьdataСвойства — это мощный способ обработки состояния «из коробки», а также передачи данных дочерним компонентам.
export default {
name: 'MyComponent',
data() {
return {
someValue: 'Hello World',
};
},
}
<template>
<div class="MyComponent">
<some-component :some-value="someValue"></some-component>
</div>
</template
Если вы разрабатываете довольно простое приложение или все, что вы делаете, это заменяете некоторые (изначально отрисованные на сервере) части вашего приложения какой-то магией Vue.js, тогда вам вообще не нужен Vuex.
И наоборот, если вы разрабатываете крупномасштабное одностраничное приложение, вы можете столкнуться с ситуацией, когда один и тот же фрагмент данных требуется в двух совершенно разных местах приложения. Это когда инструмент централизованного управления состоянием, такой как Vuex, время от времени вступает в игру.
II. Причины хранить данные в Vuex
Итак, каковы причины хранения данных в централизованном хранилище Vuex?
2-1. Данные должны быть доступны нескольким (независимым) компонентам
Первый вариант использования для помещения данных в централизованное хранилище, такое как Vuex, заключается в том, что к данным необходимо обращаться из нескольких мест в приложении, которые, вероятно, будут несвязанными (не родительским компонентом, а дочерним компонентом) простыми компонентами. Примером может служить использование некоторых пользовательских настроек для настройки внешнего вида приложения или того, какой формат даты следует использовать в определенном месте.
2-2.Централизованный API/логика сбора данных
Возьмем в качестве примера проверенное приложение To-Do: вы хотите запросить список всех элементов To-Do из API и хотите отобразить все элементы в хронологическом порядке, а есть страницы, которые только отображать определенную категорию. С помощью Vuex вы можете получить все элементы списка дел один раз и сохранить их в хранилище, а затем получить доступ к этим данным в каждом компоненте вашего приложения, даже если они распределены по разным маршрутам. Другой подход заключается в запросе определенного элемента списка дел, когда пользователь переходит к определенной категории маршрутов; в зависимости от характера приложения это также может иметь смысл.
2-3. Постоянное состояние приложения на стороне клиента
благодарныйvuex-persistedstateТакие плагины Vue.js упрощают управление постоянным состоянием с помощью Vuex в браузере. Это позволяет легко справляться со сложными ситуациями, когда пользователи остаются в автономном режиме.
III. Причины не хранить данные в Vuex
Если вы решили использовать Vuex для управления состоянием в своем приложении, то каждый раз, когда вы добавляете новый компонент, вам придется решать, сохранять ли его состояние в Vuex. Если вы новичок в Vuex, у вас, вероятно, возникнет соблазн использовать Vuex для всего — почему бы не использовать его, если он существует?
3-1.Сложность
Хотя Vuex проще своих аналогов, он все же слишком громоздкий по сравнению с прямым использованием локального состояния компонента. Вам нужно оценить, какие дополнительные сложности и преимущества централизованного состояния того стоят.
3-2 Стоимость обслуживания
Использование Vuex в компонентах всегда означает затраты на обслуживание. Исходя из этого, я рекомендую вам использовать локальное состояние компонента по умолчанию и выбирать Vuex только в том случае, если у вас есть веская причина.
IV. Альтернативы хранению данных вне Vuex
Теперь, когда у Vuex так много недостатков, какие есть альтернативы, если мы считаем, что это не лучшее решение?
4-1. Нисходящие реквизиты
Часто самый простой способ — лучший. Если вы можете решить проблему с пропсами, передаваемыми от родителя к дочернему, вы обязательно должны это сделать.
4-2. provide / inject
Менее известная функция Vue.js —provide / inject. Он используется в сценариях, где необходимо передать данные от одного компонента-предка ко всем его компонентам-потомкам.
Базовый пример из официальной документации:
// 父级组件提供 'foo'
var Provider = {
provide: {
foo: 'bar'
},
// ...
}
// 子孙组件注入 'foo'
var Child = {
inject: ['foo'],
created () {
console.log(this.foo) // => "bar"
}
// ...
}
Типичным примером является компонент аккордеона, который может состоять из основногоAppAccordionкомпонент, количество элементов, представляющих каждый сложенный элементAppAccordionItemподкомпоненты иAppAccordionBodyСолнечный компонентный состав. обеспечить/внедрить позволяет передавать данные от основного компонента к внуку. Когда компоненты на всех уровнях напрямую зависят друг от друга (AppAccordionBodyв отрядеAppAccordionкомпоненты), этот режим проще и эффективнее, чем использование Vuex.
4-3 Получение данных из API/Apollo
Давайте рассмотрим положительный пример Vuex, упомянутый в 2-2: приложение To-Do с несколькими категориями. На самом деле, вместо одновременного извлечения и сохранения всех (незавершенных) элементов списка дел пользователя, лучшей реализацией может быть извлечение только первых 20 элементов для отображения страницы входа. Если пользователь переходит на страницу определенной категории, инициируется новый запрос для получения первых 20 элементов соответствующей категории из API. Если пользователь обращается к ранее открытой категории, мы можем либо повторно запросить свежие данные, либо реализовать какое-то кэширование (Apollo предоставляет механизм кэширования из коробки).
Аннотация: GraphQL — это язык запросов, созданный Facebook для описания сложных моделей данных, это спецификация для интерфейсных и внутренних методов запроса данных.Apolloпредставляет собой набор полнофункциональных решений на основе GraphQL. Соответствующая библиотека предоставляется от бэкэнда к интерфейсу, чтобы сделать разработку и использование GraphQL более удобными; плагин, доступный для Vue,vue-apollo.netlify.com/
4-4. portals
На первый взгляд,PortalVueПлагины, кажется, не имеют ничего общего с управлением состоянием. Но в некоторых случаях портал может напрямую обращаться к состоянию компонента, минуя централизованное хранилище. Типичным примером может быть модальное диалоговое окно, чтобы убедиться, что пользователь не нажал кнопку удаления по ошибке:
<template>
<button class="AppDeleteButton" @click="modal = true">
删除
<portal to="modals" v-if="modal">
<app-modal>
你可想好了啊？
<button @click="delete(item.id)">对</button>
<button>算了</button>
</app-modal>
</portal>
</button>
</template
видимый, когдаAppDeleteButtonПри щелчке компонента отображается модальное окно, содержащее его. По сравнению с необходимостью отделить кнопку записи и всплывающее окно и получить глобальный доступ к данным идентификатора через хранилище, когда подключаемый модуль ProtalVue не используется, к этому методу можно получить доступ непосредственно в компоненте модели в примере.AppDeleteButtonВнутреннее значение свойства .
V. Изображение, которое вы хотите
Для облегчения принятия решения вышеизложенное суммировано на следующем рисунке:
VI. Резюме
Помните, что в разработке программного обеспечения не существует универсальной стратегии. У всего есть свой контекст, и во многих статьях есть техника, которая хорошо работает в определенных ситуациях, но может не работать для вашего конкретного варианта использования.
Будьте открыты для новых (и старых) способов ведения дел и не бойтесь пробовать — даже если какой-то способ обмена состоянием в вашем приложении не работает, по крайней мере, вы узнали, когда его не использовать, и В любое время самое подходящее время для рефакторинга вашего кода.
--End--
Поиск FemmeLife Подпишитесь на официальный аккаунт
Пожалуйста, укажите источник