Дни подряд

Привычка закрепляется не сразу, и ничто так не поддерживает, как серия: количество дней подряд, в которые вы выполнили все привычки. Когда набралось несколько дней, прерывать серию уже не хочется.

В конце дня вы нажимаете Завершить день. Если всё выполнено, серия растёт на единицу, если нет — начинается с нуля. После этого со всех привычек снимаются отметки, и всё готово к завтрашнему дню. Настоящее приложение могло бы делать это само в полночь, по датам; с кнопкой можно всё попробовать, не дожидаясь следующего дня.

Серия должна пережить и закрытие страницы, поэтому для неё тоже используется композабл, с отдельным ключом. Для этого композаблы и нужны: одна строка — и сохраняется ещё одно значение.

const streak = useLocalStorage("streak", 0);

function finishDay() {
    if (allDone.value) {
        streak.value++;
    } else {
        streak.value = 0;
    }
    for (const habit of habits.value) {
        habit.done = false;
    }
}

allDone — это вычисляемое значение из прогресса, поэтому в скрипте ему нужен .value. Цикл проходит по всем привычкам и снимает с них отметки, а наблюдатель в useLocalStorage сохраняет каждое изменение.

Серия и кнопка идут в конце <template v-else>, под формой:

<div class="day">
    <p>Дней подряд: {{ streak }}</p>
    <button @click="finishDay">Завершить день</button>
</div>