Разработка проекта - Vuex Store

После установки необходимых модулей, открываем файл store/index.js вставляем следующий код:

Исходный код

import { createStore } from 'vuex'
export default createStore({
    state: {},
    getters: {},
    actions: {},
    mutations: {}
})

Добавляем axios

import { createStore } from 'vuex'

import axios from "axios"

export default createStore({
    state: {},
    getters: {},
    actions: {},
    mutations: {}
})

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

import { createStore } from "vuex";
import axios from "axios";
export default createStore({
  state: {
    users: [],
    catalogs: []
  },
  getters: {
    getUsers: (state) => state.users,
    getCatalogs: (state) => state.catalogs,
  },
  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);
      }
    },
    async fetchCatalogs({ commit }){
      try {
        const data = await axios.get(
            "public/catalogs"
        );
        commit("SET_CATALOGS", data.data);
      } catch (error) {
        alert(error);
        console.log(error);
      }
    }
  },
  mutations: {
    SET_USERS(state, users) {
      state.users = users;
    },
    SET_CATALOGS(state, catalogs) {
      state.catalogs = catalogs;
    },
  },
});