Начало работы с Vuex: руководство для начинающих

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

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

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

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

Хотите узнать Vue.js с нуля? Получите полную коллекцию книг Vue, охватывающих основы, проекты, советы и инструменты и многое другое с SitePoint Premium. Присоединяйтесь сейчас всего за $ 9 / месяц .

Пример корзины покупок

Давайте рассмотрим реальный пример, чтобы продемонстрировать проблему, которую решает Vuex.

Когда вы заходите на сайт покупок, у вас обычно будет список товаров. У каждого товара есть кнопка « Добавить в корзину» , а иногда и ярлык « Оставшиеся товары» с указанием текущего запаса или максимального количества товаров, которое вы можете заказать для указанного товара. Каждый раз, когда продукт приобретается, текущий запас этого продукта уменьшается. Когда это происходит, метка « Оставшиеся элементы» должна обновляться с правильным значением. Когда уровень запаса продукта достигает 0, на этикетке должно появиться « Нет на складе» . Кроме того, кнопка « Добавить в корзину» должна быть отключена или скрыта, чтобы клиенты не могли заказывать товары, которых в данный момент нет на складе.

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

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

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

Предпосылки

Прежде чем мы начнем, я предполагаю, что вы:

• иметь базовые знания Vue.js
• знакомы с функциями языка ES6 и ES7

Вам также потребуется последняя версия Node.js, которая не старше версии 6.0. На момент написания этой статьи самые последние версии Node.js v10.13.0 (LTS) и npm версии 6.4.1. Если в вашей системе не установлена ​​подходящая версия Node, я рекомендую использовать менеджер версий .

Наконец, у вас должна быть установлена ​​самая последняя версия Vue CLI :

npm install -g @vue/cli 

Построить счетчик используя локальное состояние

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

 vue create vuex-counter 

 cd vuex-counter mv src/components/HelloWorld.vue src/components/Counter.vue 

 <template> <div id="app"> <h1>Vuex Counter</h1> <Counter/> </div> </template> <script> import Counter from './components/Counter.vue' export default { name: 'app', components: { Counter } } </script> 

 <template> <div> <p>Clicked {{ count }} times! Count is {{ parity }}.</p> </div> </template> <script> export default { name: 'Counter', data: function() { return { count: 0 }; }, computed: { parity: function() { return this.count % 2 === 0 ? 'even' : 'odd'; } } } </script> 

 methods: { increment: function () { this.count++; }, decrement: function () { this.count--; }, incrementIfOdd: function () { if (this.parity === 'odd') { this.increment(); } }, incrementAsync: function () { setTimeout(() => { this.increment() }, 1000) } } 

 <button @click="increment" variant="success">Increment</button> <button @click="decrement" variant="danger">Decrement</button> <button @click="incrementIfOdd" variant="info">Increment if Odd</button> <button @click="incrementAsync" variant="warning">Increment Async</button> 

 // src/store/index.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { // put variables and collections here }, mutations: { // put sychronous functions for changing state eg add, edit, delete }, actions: { // put asynchronous functions that can call one or more mutation functions } }) 

 // src/main.js import store from './store' new Vue({ store, render: h => h(App) }).$mount('#app') 

 state: { products: [], count: 5, loggedInUser: { name: 'John', role: 'Admin' } } 

 <template> <p>{{ $store.state.count }}</p> </template> 

 <template> <p>{{ count }}</p> </template> <script> export default { computed: { count() { return this.$store.state.count; } } } </script> 

 <template> <div> <p>Welcome, {{ loggedInUser.name }}.</p> <p>Count is {{ count }}.</p> </div> </template> <script> import { mapState } from 'vuex'; export default { computed: mapState({ count: state => state.count, loggedInUser: state => state.loggedInUser }) } </script> 

 export default { computed: mapState([ 'count', 'loggedInUser' ]) } 

 computed: { ...mapState([ 'count', 'loggedInUser' ]), parity: function() { return this.count % 2 === 0 ? 'even' : 'odd' } } 

 getters: { depletedProducts: state => { return state.products.filter(product => product.stock <= 0) } } 

 computed: { depletedProducts() { return this.$store.getters.depletedProducts; } } 

 import { mapGetters } from 'vuex' export default { //.. computed: { ...mapGetters([ 'depletedProducts', 'anotherGetter' ]) } } 

 getters: { getProductById: state => id => { return state.products.find(product => product.id === id); } } store.getters.getProductById(5) 

 // property notation, result cached store.getters.depletedProducts // method notation, result not cached store.getters.getProductById(5) 

 export default new Vuex.Store({ state:{ count: 1 }, mutations: { increment(state) { state.count++ } } }) 

 methods: { updateCount() { this.$store.commit('increment'); } } 

 // store.js mutations: { incrementBy(state, n) { state.count += n; } } 

 // component updateCount() { this.$store.commit('incrementBy', 25); } 

 // store.js mutations: { incrementBy(state, payload) { state.count += payload.amount; } } 

 // component updateCount() { this.$store.commit('incrementBy', { amount: 25 }); } 

 store.commit({ type: 'incrementBy', amount: 25 }) 

 import { mapMutations } from 'vuex' export default{ methods: { ...mapMutations([ 'increment', // maps to this.increment() 'incrementBy' // maps to this.incrementBy(amount) ]) } } 

 //.. actions: { increment(context) { context.commit('increment'); } } 

 actions: { increment({ commit }) { commit('increment'); } } 

 actions: { incrementAsync: async({ commit }) => { return await setTimeout(() => { commit('increment') }, 1000); } } 

 store.dispatch('incrementAsync') // dispatch with payload store.dispatch('incrementBy', { amount: 25}) // dispatch with object store.dispatch({ type: 'incrementBy', amount: 25 }) 

 this.$store.dispatch('increment') 

 import { mapActions } from 'vuex' export default { //.. methods: { ...mapActions([ 'incrementBy', // maps this.increment(amount) to this.$store.dispatch(increment) 'incrementAsync', // maps this.incrementAsync() to this.$store.dispatch(incrementAsync) add: 'increment' // maps this.add() to this.$store.dispatch(increment) ]) } } 

 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { count: 0 }, getters: { parity: state => state.count % 2 === 0 ? 'even' : 'odd' }, mutations: { increment(state) { state.count++; }, decrement(state) { state.count--; } }, actions: { increment: ({ commit }) => commit('increment'), decrement: ({ commit }) => commit('decrement'), incrementIfOdd: ({ commit, getters }) => getters.parity === 'odd' ? commit('increment') : false, incrementAsync: ({ commit }) => { setTimeout(() => { commit('increment') }, 1000); } } }); 

 import { mapState mapGetters, mapActions } from 'vuex' export default { name: 'Counter', computed: { ...mapState([ 'count' ]), ...mapGetters([ 'parity' ]) }, methods: mapActions([ 'increment', 'decrement', 'incrementIfOdd', 'incrementAsync' ]) } 

 <p> Clicked {{ $store.state.count }} times! Count is {{ $store.getters.parity }}. </p>