webmasterdevlin

import * as types from "../../types";
import heroesService from "../../../services/heroes-services";

const actions = {
  [types.ACTION_GET_HEROES]({ commit }) {
    return new Promise(resolve => {
      heroesService
        .getHeroes() // getHeroes() is a method in my HeroesServices that sends get request to a backend service.
        .then(data => {
          commit(types.MUTATE_GET_HEROES, data); // commit does the changes in your state.

webmasterdevlin

import * as types from "../../types";

const mutations = {
  [types.MUTATE_GET_HEROES](state, heroes) {
    state.heroes = heroes.reverse(); // reverse() reverses the order of the elements in an array
  },

  [types.MUTATE_GET_HERO](state, hero) {
    state.hero = hero;
  },

webmasterdevlin

// Getters
export const GETTERS_INIT_HEROES = "GETTERS_INIT_HEROES";
export const GETTERS_INIT_HERO = "GETTERS_INIT_HERO";

// Mutations
export const MUTATE_GET_HEROES = "MUTATE_GET_HEROES";
export const MUTATE_GET_HERO = "MUTATE_GET_HERO";
export const MUTATE_ADD_HERO = "MUTATE_ADD_HERO";
export const MUTATE_UPDATE_HERO = "MUTATE_UPDATE_HERO";
export const MUTATE_REMOVE_HERO = "MUTATE_REMOVE_HERO";