Привычки из файла

Новый трекер должен начинаться с нескольких готовых привычек, и ваш будет загружать их из файла, как кафе загружало меню в уроке «Жизненный цикл и данные». Они лежат в habits.json, в последней вкладке: три привычки из App.vue и ещё две, чтобы было видно, когда список пришёл из файла.

Приложение загружает файл в onMounted, когда компонент уже на странице. Пока файл не пришёл, habits — пустой массив, а ещё два рефа сообщают, что происходит: loading равен true, пока не придёт ответ, а в error попадает сообщение, если файл загрузить не удалось:

const habits = ref([]);
const loading = ref(true);
const error = ref("");

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

Почему бы просто не написать await fetch() в начале <script setup>? Как вы видели в уроке «Жизненный цикл и данные», тогда компонент не показывает вообще ничего. С onMounted страница появляется сразу, а привычки приходят чуть позже.

Шаблон показывает одно из трёх: пока файл загружается — сообщение об этом, при ошибке — ошибку, а в остальных случаях — список. Элементы с v-if, v-else-if и v-else должны идти строго друг за другом:

<p v-if="loading">Загрузка…</p>
<p v-else-if="error" class="error">{{ error }}</p>
<ul v-else class="habits">

Класс error делает сообщение красным; его вы найдёте в style.css.

Типичные ошибки:

• Забыть .value: habits = await response.json(); пытается записать массив в саму константу, и консоль показывает TypeError: Assignment to constant variable.
• Забыть await перед response.json(). Тогда в habits окажется Promise вместо массива, и список останется пустым.