Если вы напишете в своем резюме о реализации «системы электронной коммерции XX», ваша первая мысль состоит в том, что этот человек, должно быть, прошел курс обучения. А наш курс «управление проектами» — это просто небольшой веб-сайт электронной коммерции. Время разработки составляет около месяца, включая сторону покупателя, продавца и администратора.Хотя бизнес-логика относительно обычная, от этой разработки все же есть выгода.Самая важная выгода в том, чтоПолучил реальную практику и осведомленность о Vuex.Поэтому большая часть этой статьи знакомит с практикой использования Vuex в этом проекте и ямами, на которые он наступил, а другая часть является кратким изложением некоторых других моментов в проекте.
Раздутые компоненты Vue прошлого
В предыдущих нескольких разработках проекта, после получения внутреннего интерфейса и требований, функции будут реализованы следующим образом:
- Разделите компоненты и страницы и постарайтесь обеспечить возможность повторного использования некоторых компонентов.
- Абстрагируйте некоторый многократно используемый код SCSS и разработайте классы общего стиля.
- Настройте и инкапсулируйте слой базовых методов на основе библиотеки HTTP (например, axios) и напишите определенные функции API на основе этого метода.
- Вызовите вышеуказанные инкапсулированные методы на страницах и компонентах, в обратных вызовах функций или
Promiseизthenметод для обновления данных или выполнения дополнительной бизнес-обработки.
Вроде нет проблем, да?
Шаги 1, 2 и 3 практически не вызывают проблем, проблема заключается в шаге 4. В результате файл Vue становится все больше и больше, а сложный файл vue страницы будет содержать следующее содержимое:
-
dataВ файле большое количество полей данных.控制是否展示元素的,渲染用数据,用于"上锁"的变量Ждать. - существует
createdилиmountedсодержит много请求а также回调处理. - существует
templateВ свойствах используемых компонентов связывается большое количествоprops.
Конечный результат заключается в том, что Vue-файл становится раздутым.
Чем длиннее файл, тем труднее его читать и тем труднее его поддерживать.
Никому не нравится видеть сложный файл кода, содержащий логическую обработку, обработку интерфейса и обработку данных.
Поэтому для решения вышеперечисленных задач введемVuexочень нужно.
На самом деле, я использовал Vuex раньше, но цель его использования — просто
“保存一点数据能够全局使用”Просто вообще не используетсяAction,Getters,MutationsЖдать. Эта статья не будет слишком много рассказывать о принципах и преимуществах Vuex, в основном фокусируясь на практике и опыте, пожалуйста, перейдите к вводу или вводу Vuex.официальная документация.
Чистый, несвязанный и четко определенный
Что сделал автор, так это поместил запросы данных и обновления вVuexв, пустьVuexстать целым проектом“数据集散中心”,а такжеvueкомпонент, просто сделайте事件调度（dispatch）а также绑定来自Vuex的数据.
простой пример
В качестве примера возьмем страницу сведений о продукте, которая включает в себя следующие функции:
- Первая страница входа запрашивает данные о продукте в соответствии с идентификатором в параметре URL.
- Обновите инвентарь и цену на основе выбора атрибута предмета.
- Добавьте в корзину и обновите маленькую красную точку.
- разместить заказ.
- Любимый продукт.
как показано на рисунке:
Если бы мы не использовали Vuex, код мог бы иметь следующую структуру:
<template>
<template>
<script>
export default {
data() {
detail: {
name: '',
shopId: '',
id: '',
pic: '',
description: '',
price: '',
updateTime: '',
categoryId: '',
stock: 0,
createTime: '',
attributeList: {},
collectId: 0,
},
// 一大堆商品的字段数据 【MARK】
},
created(){
this.$http.get('/product/:id')
.then()
// 以及一端更新其他数据的请求 【MARK】
},
methods(){
clickCart(){
this.$http.get('xxx')
.then('xxx')
this.$emit('xxx'); // 与上层组件通信更新购物车的红点
}
// 一堆用户事件的触发方法，每个方法内都是一堆http请求和回调处理 【MARK】
},
computed:{
// 一些基于商品数据判断状态的数据 【MARK】
}
}
</script>
<style>
<!-- 忽略相关样式代码-->
<style>
Если вы пишете, как описано выше способом, хотя вы можете гарантировать обработку логики на этой странице сохраняется в этом документе Vue, но стало очень раздутым, если последующие действия, чтобы добавить больше функций или изменено, это может быть больше необходимости читать код много.
Итак, в приведенном выше примере кода【MARK】Отмеченная часть будетVuexможно оптимизировать.
Окончательный код показан ниже:
Читабельность кода значительно улучшилась:
- Я не вижу никаких http-запросов в этом файле, и также не вижу путей запросов. (Путь запроса, как правило, статичен, и запись пути HTTP-запроса напрямую эквивалентна записи источника мертвых данных, что очень недружественно для последующих изменений в источнике данных)
-
dataне содержит полей бизнес-данных, сохраняя только те поля, которые управляют страницей -
Структура кода стала проще,Только
【触发事件】-【回调】Такая простая логика.
Весь код для обработки данных инкапсулирован вVuexна:
На уровне Vuex мы не только запрашиваем данные, но и оцениваем возвращаемые данные и различные логические обработки, а также устанавливаемGettersРазрешить создание страниц на основеGettersПредоставленные данные делают различные二元判断.
Слой Vuex дает следующие преимущества:
-
То же самое может быть вызвано на разных страницах
Actions, для этого примера мне нужно написать его только один раз加入购物车Функцию можно использовать на каждой странице. -
Действия можно использовать в комбинации, благодаря комбинации мы можем легче реализовать сложную бизнес-логику, такую как
添加商品进购物车的同时更新商品数据并更新购物车数据, это нужно написать три разаHTTPДля требуемой бизнес-логики вам нужно всего лишь объединить три действия, и эти действия также можно использовать по отдельности в других местах. - интуитивно понятный, с первого взгляда можно узнать, какие действия есть над моделью продукта, новичку удобнее быть знакомым с бизнес-логикой, а разработчикам также удобно проверять, хорошо ли продуман их код или функции. (Кстати, очень сложно найти логику в куче HTML)
-
Уменьшить количество коммуникаций между компонентами, централизованный
数据仓库Преимущество в том, что это уменьшает операцию передачи данных между слоями.Согласно предыдущим привычкам кодирования, я буду использовать его много.$emitа такжеpropsЧтобы обеспечить связь между компонентами родитель-потомок или одноуровневый, и теперь вам нужно только инициировать соответствующее событие в компоненте для привязки соответствующих данных.
Новый опыт делового письма
Интуитивно понятный опыт, тщательное использованиеVuexПосле этого идеи кода ясны, потому что одна из реализованных фич — 2~3 дня, а Vuex —“间断性编程”Очень полезно, возможность быстро отслеживать ход последней разработки.
После использования Vuex он разрабатывается в соответствии со следующими шагами:
(Шаги 1, 2 и 3 остаются без изменений, как указано выше)
4. Создайте модель Vuex Store и определите необходимые методы.
5. Напишите компоненты и привяжите связанные данные и методы к Vuex.
6. Напишите триггерdispatchобратный звонок после.
Автор считает, что существует несколько важных принципов использования Vuex.
использоватьVuexЕсть определенные спецификации, такие как表单处理,测试,项目结构Следующие принципы являются лишь частью опыта автора, который может быть неправильным.
[Не обрабатывать переходы на страницы]: страница переходитdispatchобрабатывается в обратном вызове.
Изначально мой дизайн былActionПосле запроса данных он также несет ответственность за все跳转逻辑а также弹窗逻辑однако это делает视图层а также数据层Сцепление делает меня абстрактнымActionВозможность повторного использования становится крайне плохой, и в то жеvueЭто относительно нормальная логика записи, чтобы увидеть обработку слоя представления в файле.
【Принцип единой ответственности】：mutationа такжеactionПопробуйте продолжать делать только одну вещь.
Как упоминалось в предыдущем принципе для улучшенияactionвозможность повторного использования, то необходимо обеспечить, чтобы многоразовыеactionпросто выполните функцию, например更新A数据а также更新B数据Не сливайте сразу в одинaction, но определите дваaction,а такжекомбинируяреализовать более сложную функцию, напримерсокращенный набор инструкцийподумал о.
Такие как:
actions:{
updateA(){}, // A 可能在其他地方被单独使用
updateB(){}, // B 可能在其他地方被单独使用
updateAandB({dispatch}){
dispatch("updateA");
dispatch("updateB");
}, // 同时触发 A B 的复杂action
}
[Использование Promise и AA] (Async & Await)
чтобыdispatchфункция имеетPromise风格Возможность обработки обратных вызовов позволяетactionвозвращаемое значение какPromiseобъекты, такие как:
// store.js
actions:{
updateA(){
return Promise.resolve()
}
}
можно использовать внутри компонента.then:
...
created(){
this.$store.dispatch('updateA')
.then(() => {
...
})
}
...
а такжеVuexОбычно рекомендуется вactionsАсинхронная операция, поэтому, чтобы сделать код более элегантным, вы можете использоватьAAПишите следующим образом:
// store.js
actions:{
async updateA(){
const result = await ajax('/**/**');
if(result){
return Promise.resolve()
}
}
}
Итак, код на практике выглядит следующим образом:
[Использовать пространство имен] для вашего же блага.
Как правило, при использовании vuex состояние будет разделено в соответствии с сущностью или страницей для формирования модуля, модуль содержит все необходимыеactions，states，mutationЖдать. В электронной коммерции, как правило,商品,订单,用户Эти сущности могут быть разделены на модули после разделения, как показано на рисунке:
Преимущество разделения в том, что оно более самостоятельное и интуитивно понятное, недостаток в том, что если не использоватьПространства имен,может привести кactions,mutationsконфликт,в самый разVuexтак же доступноnamespaceКонфигурация,Ссылаться наофициальная документацияВот и все.
Недостаточное использование на этот раз
пространство имен не используется
Хотя мы заключили в принципе, но на этот раз не использовалиnamespace, что на этот раз является большой проблемой.Решением является «ручное пространство имен», как показано на рисунке:
БудуactionsПрефикс имени метода плюс имя объекта используются для различения разных методов, что на самом деле является относительно плохим методом.
Некоторые коды до сих пор пишутся неоднократно
Такая ситуация возникает в коде после получения асинхронных данных, как правило, следующий код будет повторяться много раз:
if (result.code){
return Promise.resolve(data);
}
return Promise.reject(msg);
Хоть это и не слишком много, но эта логика все же имеет возможность абстрагироваться.В следующий раз я планируюRootStateдобавитьaction, который используется для обработки данных, возвращаемых таким бэкэндом, и ожидаемый результат выглядит следующим образом:
actions: {
parseResult({}, result){
if (result.code){
return Promise.resolve(data);
}
return Promise.reject(msg);
},
async getA({dispatch}){
const result = await http.get('xx/xx');
return dispatch('parseResult', result); // One line , it's clean
}
}
другой урожай
Используйте Vue CLI 3
3.0 в основном делается в конфигурации极简化. давно нет развитияVueпроект, помните предыдущийVueВ проекте еще многоxxx.congfig.js, а теперь, в основном интегрированный в CLI, черезvue.config.jsОн может удовлетворить большинство потребностей в области развития. Конфигурация этого проекта выглядит следующим образом:
Это более интуитивно понятно, чем предыдущая конфигурация, см.:cli.vuejs.org/zh/, Что касается механизма плагинов, то он в данной разработке не используется, но может использоваться при установке сторонних пакетовvue addТеперь есть графический интерфейс, чтобы увидеть, какие плагины установлены.
БудуVue.use 和 Vue.installгде используетсяpluginsПод содержанием
Этот проект представляет собой многостраничное приложение с 3 экземплярами Vue, поэтому я надеюсь, что при необходимости смогу внедрить желаемые сторонние зависимости, такие какaxios,qrcode,lazyloadНекоторые библиотеки инструментов или сторонние компоненты. Итак, подводится итогpluginsкаталог, как показано ниже:
Преимущество этой инкапсуляции в том, что я могу импортировать сторонние зависимости по запросу для каждого экземпляра Vue, всего одной строкой импорта, как показано ниже:
Начните думать об оптимизации
Большое веб-приложение не должно превышать 500 КБ после упакованного и сжатого, поэтому используйте это какBenchmarkоптимизировать упакованный размер проекта,按需引入сторонние зависимости (особенноElementа такжеlodash) значительно уменьшает размер проекта. Но самое главное научиться пользоватьсяwebpack analyse toolанализировать.
В заключение
Короче говоря, этот проект в основном предназначен для обновленияVuexпознание, которое позволяет нам писатьvueКомпоненты более удобочитаемы и ремонтопригодны. В то же время это также может сделать повторное использование кода блока обновления данных более многоразовым. пройти черезVuexпостроить中心化的数据集散中心Это также может сделать развитие идей более плавным и достойным изучения.
Ссылаться на: