Сохранение привычек

Отметьте несколько привычек и снова нажмите «Запустить». Всё как в начале: при каждом открытии страницы приложение стартует с нуля и снова загружает файл. Трекер, который забывает, что вы сделали, ни к чему, поэтому он будет сохранять привычки в localStorage.

В уроке «Композаблы» вы написали для этого композабл useLocalStorage(key, initial). Он возвращает реф, как и ref(), но реф начинается с того, что сохранено под ключом (или с initial, если пока ничего не сохранено), а наблюдатель сохраняет его при каждом изменении. Он лежит в отдельном файле, useLocalStorage.js, в третьей вкладке:

import { ref, watch } from "vue";

export function useLocalStorage(key, initial) {
    const saved = localStorage.getItem(key);
    const value = ref(saved === null ? initial : JSON.parse(saved));

    watch(
        value,
        (newValue) => {
            localStorage.setItem(key, JSON.stringify(newValue));
        },
        { deep: true },
    );

    return value;
}

Здесь важна опция { deep: true }: когда вы отмечаете привычку, меняется done глубоко внутри массива, а не сам массив, и без неё наблюдатель этого не заметил бы.

В App.vue теперь habits берётся из композабла, а не из ref(), и сохраняется под ключом "habits". Остальной код может остаться как есть, потому что habits по-прежнему реф с массивом:

import { useLocalStorage } from "./useLocalStorage.js";

const habits = useLocalStorage("habits", []);

Если приложение запускается при уже сохранённых привычках, загружать файл поверх них нельзя. Поэтому onMounted загружает файл, только когда привычек нет: при первом открытии приложения или после того, как вы удалили их все, — тогда готовые привычки возвращаются.

onMounted(async () => {
    if (habits.value.length === 0) {
        const response = await fetch("habits.json");
        if (!response.ok) {
            error.value = "Не удалось загрузить привычки.";
        } else {
            habits.value = await response.json();
        }
    }
    loading.value = false;
});

Окно просмотра хранит то, что страница сохраняет, пока вы работаете над упражнением. Как только что-нибудь сохранено, в консоли появляется кнопка Очистить сохранённые данные, которая открывает страницу заново, как в первый раз.