Трекер привычек

Добро пожаловать на последний урок курса по Vue! В нём вы шаг за шагом соберёте целое приложение: трекер привычек. Привычки — это небольшие дела, которые хочется делать каждый день, например пить достаточно воды или гулять. Приложение показывает их списком, а вы отмечаете, что сделали сегодня. Оно показывает ваш прогресс полосой, позволяет добавлять свои привычки и удалять ненужные, а ещё помнит всё, даже сколько дней подряд вы выполняли все привычки.

Вы примените всё, что узнали на курсе: компоненты с пропсами и событиями, данные из файла, вычисляемые значения, форму и композабл. Каждое упражнение продолжает предыдущее (в его редакторе уже лежит готовый код предыдущего упражнения) и добавляет одну часть.

План. Привычки хранятся в App.vue, в рефе с массивом объектов. У каждой привычки есть id, name, icon (значок-эмодзи) и done — выполнена ли она сегодня. Одну привычку показывает компонент из второй вкладки, HabitItem.vue. Он получает привычку в пропсе и уже зачёркивает выполненную: для этого нужны <li :class="{ done: habit.done }"> и его <style scoped>.

Когда вы отмечаете привычку, HabitItem не меняет её сам. Привычки принадлежат App.vue, поэтому компонент просит об этом родителя событием, как в уроке «События компонентов». Флажок показывает значение через :checked, а когда вы щёлкаете по нему, его событие change отправляет событие toggle с id привычки:

<input type="checkbox" :checked="habit.done" @change="emit('toggle', habit.id)">

App.vue слушает его через @toggle="toggle". Его функция toggle(id) находит привычку с этим id и меняет её done:

function toggle(id) {
    const habit = habits.value.find((item) => item.id === id);
    habit.done = !habit.done;
}

find() возвращает сам объект привычки, а не копию, поэтому изменение его done меняет привычку в habits. Затем Vue обновляет страницу, и HabitItem показывает привычку зачёркнутой. Так данные хранятся в одном месте и меняются в одном месте, а компоненты только показывают их.

Почему не v-model="habit.done", как в уроке «Формы»? Он менял бы данные родителя прямо из HabitItem, а в большом приложении вы бы скоро перестали понимать, где меняются данные. Как в уроке «События компонентов», данные спускаются в компонент через пропсы, а компонент просит об изменениях событиями.