- Оригинальный адрес:Two less known facts about Vuex
- Оригинальный автор:Alex Jover
- Переводчик:Дядя Программист Он
Специальная оговорка: эта статья является авторомAlex JoverОпубликовано вVueDoseряд выше.
Авторские права принадлежат автору.
Переводчик связался с автором перед переводом и получил разрешение на перевод всей серии.
Чтобы не мешать всеобщему прочтению, разрешенные записи будут размещены в конце этой статьи.
текст
Этот пост исходит от очень специального приглашенного:Nicolò Mezzopera,онPulilabРазработчик сайта, настоящий бог. В прошлом году мы вместе организовали семинар по Vue.js в Будапеште.Оффлайн встреча!
Если вам случится быть в Вероне 12 апреля этого года, он будет вVue Day Italy 2019Дайте речи на встрече, это хороший шанс для вас встретиться с ним 😉.
Введен над автором, мы приходим в тему.
При использовании Vuex в наших компонентах Vue.js мы, кажется, забываем о других полезных API-интерфейсах, которые он предоставляет, помимо функций, которые отображают функциональность.
Давайте посмотрим, что мы можем с этим сделать. Во-первых, давайте создадим базовый магазин:
const store = new Vuex.Store({
state: {
count: 0
},
getters: {
getCountPlusOne: state => state.count + 1
},
mutations: {
increment(state) {
state.count++;
}
}
});
Метод просмотра
watchэто самый полезный способ интегрировать Vuex с другим внешним кодом, вы можетеawesomeServiceили вcatchAllAuthUtilsи т.д. используются в подобных сервисах.
Пример использования:
const unsubscribe = store.watch(
(state, getters) => {
return [state.count, getters.getCountPlusOne];
},
watched => {
console.log("Count is:", watched[0]);
console.log("Count plus one is:", watched[1]);
},
{}
);
// To unsubscribe:
unsubscribe();
Все, что мы делаем, это вызываем метод экземпляра vuex.watchПри передаче двух функций в качестве аргументов первый аргумент функции возвращает свойство, которое мы хотим прослушивать в состоянии и/или геттерах; второй аргумент функции — когда значение свойстваstate.countилиgetters.getCountPlusOneФункция обратного вызова для вызова при изменении.
Это очень полезный прием при комбинировании Vuex с кодом react, angular или даже JQuery.
можно найти в этомCodeSandboxСм. примеры выше.
метод SubscribeAction
Иногда вместо прослушивания изменения свойства в хранилище лучше использоватьsubscribeActionметод подписывается на определенное действие, напримерloginа такжеlogoutтакие как асинхронные запросы, что также является более полезным сценарием.
Вызовите функцию прослушивателя, вызовите указанную функцию обратного вызова при отправке каждого действия и вызовите в ней пользовательский код.
Мы запускаем и останавливаем глобальный счетчик до и после отправки каждого действия.
const unsubscribe = store.subscribeAction({
before: (action, state) => {
startBigLoadingSpinner();
},
after: (action, state) => {
stoptBigLoadingSpinner();
}
});
// To unsubscribe:
unsubscribe();
Сделанный!
Вы можете прочитать это онлайноригинальный, исходный код которого доступен для копирования и вставки. Если вам понравилась эта серия, поделитесь ею с коллегами!
Эпилог
Другие статьи из этой серии будут синхронизированы с выпуском официального сайта серии и будут своевременно переведены и опубликованы в Nuggets. Пожалуйста, продолжайте следить"Программа Обезьяны, дядя Хе", я верю, что принесу вам больше качественного контента, не забудьте поставить лайк~
Если вы хотите узнать больше о переводчике, проверьте следующее:
- личный блог:blog.hadesz.com
- Персональный репозиторий на гитхабе:github.com/hadeshe93
- Личный публичный аккаунт WeChat: поиск «Дядя Он, программист»
Запросить запись авторизации перевода
Если вы считаете, что эта статья хороша, поделитесь ею с друзьями~