В этом уроке мы собираемся попробовать Vuex в реальной программе.

Это программа, с которой мы будем работать.

У нас есть два компонента: список продуктов и список продуктов для продажи.

Первый компонент получает данные из свойства данных через свойство info. Его работа - отображать первоначальную цену товара.

Второй компонент получает данные из вычисляемого свойства. Его задача - отображать цену со скидкой.

Цена со скидкой рассчитывается на основе списка товаров.

В настоящее время информация о продукте хранится в файле app.vue и отправляется компоненту через реквизиты.

Мы собираемся добавить в программу VueX.

При использовании VueX файлу app.vue больше не нужны данные и вычисления. Два компонента реквизита тоже не будут работать.

Сначала мы устанавливаем VueX с помощью npm.

Затем в корневой папке проекта мы создаем дочернюю папку: store. Внутри магазина мы создаем новый файл store.js.

Этот файл будет файлом конфигурации vuex.

Конфигурационный файл vuex состоит из четырех частей.

Сначала мы импортируем Vue и VueX.

Затем мы вызываем метод vue.use () и «используем» VueX. 😆

Далее мы создаем константу: store.

Его ценность - это объект.

Внутри объекта мы устанавливаем четыре свойства: состояние, геттеры, мутации и действия.

В конце мы вызываем метод vuex.Store (). Буква S ДОЛЖНА быть заглавной.

Его аргумент - константа, которую мы только что создали.

Затем мы «новый» vuex.store () и экспортируем его по умолчанию.

Теперь наш js-файл store dot в основном готов. Стоимость недвижимости мы определим позже.

Далее переходим к файлу main.js.

Мы импортируем файл магазина, а затем вставляем его в корневой экземпляр Vue.

Теперь Vuex готов к работе.

VueX установлен. Пришло время передать ответственность.

Во-первых, мы перемещаем товарный список в государственную собственность.

Государство теперь заменило данные.

Список распродаж хранится в вычисляемом. Эквивалентность вычислений в vuex - это геттеры.

В геттерах мы создаем свойство с именем sale_product_list. Его значение - это функция. Аргумент функции - состояние. Это помогает вам получить доступ к собственности в состоянии. Например, мы можем получить доступ к product_list с помощью state.product_list.

После того, как мы получили product_list, мы подключаем к нему метод map и перебираем его.

Теперь наша работа с геттерами завершена.

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

Поскольку данные были перемещены в vuex, нам больше не нужны реквизиты.

Мы удаляем директиву v bind из двух тегов компонентов.

В двух файлах компонентов мы удаляем объявление prop.

Теперь файл store.js настроен. Нам больше не нужен файл app.vue. Что происходит дальше, происходит между store.js и файлом компонента.

Итак, как нам получить доступ к состоянию и геттерам VueX в файле компонента?

Используя this. $ Store. Для доступа к состоянию вы используете this. $ Store.state.property_name. Для доступа к геттерам вы используете this. $ Store.getters.property_name.

В нашей текущей программе мы получаем доступ к product_list с помощью this. $ Store.state.product_list.

Кстати, свойство data предназначено для хранения собственных данных компонента. Он не взаимодействует с vuex. Мы получаем данные из vuex в computed.

В следующем уроке вы узнаете, как использовать… mapState и… mapGetters.

Ознакомьтесь с нашим ПОЛНЫМ курсом VueJS по Udemy:

Https://www.udemy.com/vuejs-for-students-with-zero-es6-foundation/?couponCode=MEDIUM_PROMO_1