Взять стандартный проект vue2 который создается через cli vue Добавить элементы как на рисунке ниже (стили и красота не нужна, разметку буквально <\br> задать)
1 - поле цена 2 - поле кол-во 3 - поле сумма 4 - кнопка отправки данных 5 - лейбл который отображает значение поля цена 6 - лейбл который отображает знаение поле кол-во 7 - лейбл который отображает значение поля сумма 8 - лейбл который отображает текущее сосотояние localStorage 9 - область в которой отображается информация о событиях возникших 10 - в свободной форме отображать информацию о каждом событии
- Вносить значения можно в любое поле, причем то поле, что менялось раньше всех, должно пересчитаться согласно значения изменившегося поля.
- При нажатии на кнопку, все 3 поля + nonce сохраняются в localStorage. Это иммитация отправки на бекенд. Добавить задержку в 1 секунду будто бекенд 1 секунду обслуживает запрос. Условный "бекенд" может по сути сказать - "{success: true}" и "{success: false}" что будет говорить - успешно сохранил, не сохранил
- Nonce - монотонно возрастающее число.
- В localStorage сохраняется 4 поля - nonce, price, qty, amount. Данные из localStorage следует отображать в лейбле 8 (в виде json)
- Мутация intpuов (1, 2, 3) с debounce 300ms
- В блоке 9 отображаются события в обратном порядке - что бы сверху был самое свежее событие
- событие изменения inputo-ов (1, 2, 3)
- событие при нажатии кнопки 4 - приложить то что отправлено было, показать то что в момент нажатия в localStorage
- событие когда получили фидбек после нажатия submit (4) - приложить то что в ответ было отправлено + то что в этот момент в localStorage
- При нажатии кнопки 3 если amount четное число - то успешно сохраняются данные
- При нажатии кнопки 3 если amount не четное число - то отказывает в сохранении
Необходимо продемонстрировать реализацию с vuex и без vuex. Ожидается увидеть как организуете работу с данными в каждом из подходов. Важно обеспечить, чтобы состояние приложения оставалось постоянным на протяжении всего времени его работы.
Опубликовать код на github + github pages
┌──────────────────────────────────────────────────────────────────────────────────┐
│ │
│ ┌──────────────┐ ┌───────────────┐ ┌──────────────────┐ ┌───────────────────┐ │
│ │input 1 │ │input 2 │ │input 3 │ │button 4 │ │
│ └──────────────┘ └───────────────┘ └──────────────────┘ └───────────────────┘ │
│ │
│ label 5 label 6 label 7 label 8 │
│ │
│ - │
│ │DIV─9───────────────────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ ────10──────────────────────────────────────────────────────────────── │ │
│ │ │ │
│ │ ────────────────────────────────────────────────────────────────────── │ │
│ │ │ │
│ │ ────────────────────────────────────────────────────────────────────── │ │
│ │ │ │
│ │ │ │
│ │ │ │
│ │ │ │
│ │ │ │
│ │ │ │
│ │ │ │
│ │ │ │
│ │ │ │
│ │ │ │
│ │ │ │
│ │ │ │
│ │ │ │
│ │ │ │
│ │ │ │
│ │ │ │
│ └────────────────────────────────────────────────────────────────────────────┘ │
│ │
└──────────────────────────────────────────────────────────────────────────────────┘
Вносить значения можно в любое поле, причем то поле, что менялось раньше всех, должно пересчитаться согласно значения изменившегося поля.
Пояснение дающее ясное представление о том, как поля взаимодействуют друг с другом.
Когда вы вносите изменения в одно из полей (цена, количество или сумма), два других поля будут автоматически пересчитаны на основе нового значения. При этом важно помнить, что пересчёт происходит относительно поля, которое было изменено первым.
Особые ситуации:
- Обеспечьте обработку сценария, когда во всех полях нет значений. Выберите наиболее подходящий метод обработки на ваше усмотрение.
- В случае, когда значение в одном из полей равно 0, это может создать "тупиковую ситуацию" в логике приложения. Обеспечьте корректную обработку этой ситуации в коде.
Обеспечьте корректное и логичное взаимодействие между полями.