Имитация бэкенда - Jsonplaceholder

https://jsonplaceholder.typicode.com/ - это сайт реализующий фэйковый бэкнд.

При использовании таких ресурсов, после того, как появится реальный бэкенд логику JavaScript-запросов почти не нужно будет переписывать (за исключением самих ссылок на бэкед и некоторых данных). Фронтенд фрэймворкам всё-равно, существует ли файл физически, или он генерируется в момент обращения к нему клиента. Главное, чтобы в формат JSON не было ошибок, иначе фрэймворк откажется его принимать.

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

Fetch

Напомню, что fetch является промисом, т.е. уже содержит асинхронность. Пример с ресурса Jsonplaceholder, с использованием fetch:

fetch('https://jsonplaceholder.typicode.com/todos/1')
      .then(response => response.json())
      .then(json => console.log(json))

Также для выполнения запросов можно воспользоваться инструментом axios, который, в отличии от fetch сперва необходимо установить.

npm install axios

https://github.com/axios/axios - По этой ссылке официальная документация

В скрипте компонента запрос идёт в Vuex store:

import {computed, onMounted} from "vue";
import { useStore } from "vuex";
const store = useStore();

const catalogs = computed(() => {
  return store.state.catalogs.data;
});

onMounted(() => {
  store.dispatch("fetchCatalogs");
});

В файле store/index.js реализуем метод fetchUsers, который непосредственно и делает сам запрос на бэкенд:

  actions: {
    async fetchUsers({ commit }) {
      try {
        const data = await axios.get(
            "https://jsonplaceholder.typicode.com/users"
        );
        commit("SET_USERS", data.data);
      } catch (error) {
        alert(error);
        console.log(error);
      }
    },
  }