Автор оригинала: Anthony Gore.
Одна из сложных вещей о начале работы с Vuex – это то, что это не так много Библиотека Как это Дизайн шаблона Отказ Отсюда следует, что реализация Vuex не так много о использовании API, так как о структурировании вашего кода соответствует шаблону. Если вы новичок в Vuex, это будет сложно.
В этой статье я продемонстрирую, как начать мигрировать Vuex в существующий проект Vue.js. Я покажу вам, как определить частей состояния вашего приложения, принадлежащего в Vuex, и те, которые этого не относятся, как ревертировать ваши функции компонентов в мутации, действия и т. Д., И, наконец, мы обсудим преимущества.
Если вы не уверены, почему вы должны использовать Vuex, я рекомендую вам прочитать этот пост первым WTF – Vuex: руководство для начинающих для хранения данных о приложении Vue Отказ
Примечание: эта статья была первоначально опубликована здесь на блоге разработчиков Vue.js на 2017/08/14.
Исследование: Vue.js Cinema
В качестве тематического исследования мы перенесем демонстрационное приложение, которое я сделал под названием Vue.js Cinema в Vuex. Это одно файловое VUE-приложение на основе компонентов, которое является достаточно хорошим кандидатом для Vuex, так как оно имеет значительное количество состояния приложения.
Если вы хотите узнать, как построить кинотеатр Vue.js с нуля, это часть моего Ultimate Vue.js Разработчики курс Отказ
Помните, что цель Vuex – управлять состоянием приложения. Отсюда следует, чтобы перенести кинотеатр Vue.js в Vuex, мы должны определить его состояние. Вскоре мы увидим государство в коде, но полезно сначала сделать это, просто наблюдая, что приложение IE это отображает список фильмов и времени сеанса, которые можно отфильтровать, изменяя день, или переключение времени и жанровых фильтров. Отказ
В каком штате принадлежит Vuex?
Используя Vue devtools или просто проверяя код, мы можем увидеть данные экземпляра и каждого компонента:
Наша цель – не перемещать все данные в магазин Vuex. Вместо этого мы хотим целевые данные, которые:
- Изменения в течение всего жизненного цикла приложения (статические данные не нуждаются в большом управлении).
- Совместно используется более чем одним экземпляром/компонентом.
Мы когда говорим Состояние приложения Это то, о чем мы говорим, и это то, что мы хотим переехать в магазин.
Например, посмотрите на этот банк Проверка фильтра Компоненты, которые являются пользовательскими флажками, используемыми для фильтрации списка фильмов:
Каждый Проверка фильтра Компонент имеет проверено Свойство данных, а также заголовок, который передается ему как опора E.G. До 6 вечера , После 6 вечера так далее:
SRC/Компоненты/CheckFilter.Vue
...
проверено Свойство данных – это состояние приложения для текстовой книги, поскольку он меняется на протяжении всего жизненного цикла приложения, а другие компоненты, безусловно, должны будут реагировать на его состояние.
Название Пропор, с другой стороны, не меняется и не влияет на любой другой компонент. Следовательно, не нужно управлять Vuex.
Примечание. Если у вас есть какое-либо местное состояние, которое достаточно важно, чтобы вы хотите отследить его в devtools, то все в порядке, чтобы добавить его в магазин Vuex; Это не нарушение рисунка.
Реквизит → штат
Если вы модулируете свое приложение на компоненты, так как у меня с Vue.js Cinema, хорошее место для начала поиска состояния приложения – это ваша компонентная опора, а более конкретно, реквизит по нескольким компонентам, которые разделяют те же данные.
Например, я связываю свойство данных день Из корневого экземпляра этого приложения к День – выберите и Список кино составные части. День выбора – это, как пользователь выбирает, какой день недели они хотят видеть время сеанса, и список фильмов отфильтрован выбранным значением.
День-выбор компонента
Управлять день В Vuex мы можем просто удалить его из корневого экземпляра и переместить его на Государство Объект в магазине Vuex:
export default new Vuex.store({
state: {
day: moment() // the initial value
},
...
});
Затем мы можем удалить привязку от шаблона I.E. v-bind: день = "день" И в компоненте замените PROP с вычисленным свойством, которое вызывает магазин. В случае День – выберите :
export default {
props: [ 'day' ],
...
}
Идет:
export default {
computed: {
day() {
return this.$store.state.day
}
}
}
События → Мутации
В то время как реквизиты состоит в том, чтобы обмениваться данными по всему компонентам, события намерены его изменить. Прослушиватели событий в вашем коде должны рассматриваться для преобразования в мутации Vuex. Затем возникают излучатели событий, чтобы совершить мутацию, а не излучить событие.
Вернуться к примеру День – выберите Компонент, всякий раз, когда пользователь меняет день, нажав соответствующую часть UI, этот метод компонента называется:
selectDay(day) {
this.$emit('setDay', day);
}
У корневого экземпляра есть слушатель, чтобы ответить на пользовательский setday . мероприятие:
created() {
this.$on('setDay', day => { this.day = day; });
}
В случае слушателя его можно перенести из корневого экземпляра и ввести в Мутации Объект магазина с небольшим модификацией:
SRC/Store/index.js
export default new Vuex.Store({
state: {
day: moment()
},
mutations: {
setDay(state, day) {
state.day = day;
}
}
Мутация Commit теперь заменит мероприятие Emit в День – выберите составная часть:
selectDay(day) {
this.$store.commit('setDay', day);
}
Теперь мы можем удалить слушатель мероприятия, а также в шаблоне I.e. V-ON: нажмите = «STECDADE» Отказ
Ajax → Действия
Действия в Vuex – это механизм для обработки асинхронных мутаций. Если вы используете AJAX, чтобы обновить состояние вашего приложения, вы, вероятно, захотите обернуть его в действие.
В Cinema Vue.js я использую AJAX (через HTTP-клиент Vue Resource), чтобы заполнить данные фильма с конечной точки API на моем сервере:
SRC/Main.js.
created() {
this.$http.get('/api').then(response => {
this.movies = response.data;
});
}
Это происходит только один раз в жизненном цикле приложения, когда оно создано, так что оно кажется несколько тривиальным, чтобы войти в систему с vuex, но нет вреда, и еще многое, чтобы получить с точки зрения отладки.
Действия отправляются из приложения и должны совершить мутацию после завершения асинхронного события. Вот код, чтобы добавить в магазин:
SRC/Store/index.js
export default new Vuex.Store({
state: {
...
movies: []
},
mutations: {
...
setMovies(state, movies) {
state.movies = movies;
}
},
actions: {
getMovies({ commit }) {
Vue.http.get('/api').then(response => {
commit('setMovies', response.data);
});
}
}
});
Создано Крюк теперь просто отправляет действие:
SRC/Main.js.
created() {
this.$store.dispatch('getMovies');
}
Результаты и выгоды
Однажды Vue.js Cinema был мигрирован в Vuex, каковы ощутимые выгоды? Вероятно, не будет никаких непосредственных преимуществ для пользователя с точки зрения лучшей производительности и т. Д., Но это будет легче сделать жизнь разработчиков.
Отладка
Теперь, когда данные приложения управляются Vuex, мы можем легко просмотреть любые изменения в Vue devtools:
Vuex и Vue devtools не только регистрируют изменения, а источник изменений, но позволяют «перемотать» изменение, чтобы вы могли точно видеть, как это влияет на приложение.
Как создатель Эван ты сказал : «Преимущество Vuex заключается в том, что изменения, проходящие через магазин, являются отслеживаемыми, воспроизводимыми и восстанавливающимися».
Разделение компонентов и государства
В кинотеатре Vue.js мы отслеживаем проверенные фильтры в двух массивах, по одному на время и один для жанра. Добавление и удаление фильтров требуют функции, которая ранее была методом в корневом экземпляре. Используя Vuex, мы можем аннотация, что логика в мутацию:
SRC/Store/index.js
mutations: {
...
checkFilter(state, { category, title, checked }) {
if (checked) {
state[category].push(title);
} else {
let index = state[category].indexOf(title);
if (index > -1) {
state[category].splice(index, 1);
}
}
}
},
Преимущество этого вида развязки заключается в том, что он делает код более логичным и поддерживаемым.
Шаблоны конденсации
Без шаблона магазина, как Vuex, мы разделяем данные между компонентами через механизмы реквизитов и событий, которые должны быть объявлены в шаблоне компонента. В большом приложении это может сделать шаблоны довольно многословными.
Управление общими данными в Vuex позволяет это:
Идти в:
Стать старшим Vue Developer в 2020 году.
Учитесь и осваивайте, какие профессионалы знают о строительстве, тестировании и развертывании, полностью стековых Vue Apps в нашем последнем курсе.
Учить больше