В этом уроке мы собираемся попробовать 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