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";

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

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

const state = {
  heroes: [], // this heroes array must be initialized with and empty array.
  hero: {} // this hero object must be initialized with and empty object.
};

export default state;

webmasterdevlin

import Vue from "vue"; // The Vue library
import Vuex from "vuex"; // The Vuex library

import heroes from "./modules/heroes"; // heroes module
import villains from "./modules/villains"; // villains is another module

Vue.use(Vuex); // using Vuex

export default new Vuex.Store({
  modules: {

webmasterdevlin

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

const getters = {
  [types.GETTERS_INIT_HEROES]: state => state.heroes, // retrieves the current heroes array from the state
  [types.GETTERS_INIT_HERO]: state => state.hero // retrieves the current hero object from the state
};

export default getters;

webmasterdevlin

<template>
  <div class="container-fluid">
    <NewItemForm
      :isShowNewItemForm="isShowNewItemForm"
      :newItem="newItem"
      @handleSubmit="onSubmit"
      @handleShowNewItemForm="showNewItemForm"
      @handleCancelForm="cancelForm"
    ></NewItemForm>

webmasterdevlin

import { decorate, observable, action } from "mobx";
import { Hero } from "../models/hero";
import {
  addHero,
  getHero,
  getHeroes,
  removeHero,
  updateHero
} from "./hero-service";

webmasterdevlin

import * as React from "react";
import { Hero } from "../../models/hero";
import NewItemForm from "../../common-components/NewItemForm";
import heroStore from "./../../stores/hero.store";

import { NavLink, Link } from "react-router-dom";
import { inject, observer } from "mobx-react";
import { toJS } from "mobx";
import { render } from "react-dom";

webmasterdevlin

import React from "react";
import { Redirect, Route, Switch } from "react-router";
import Heroes from "./pages/heroes/Heroes";
import EditHero from "./pages/heroes/EditHero";
import Villains from "./pages/villains/Villains";
import EditVillain from "./pages/villains/EditVillain";

import createBrowserHistory from "history/createBrowserHistory";
import { RouterStore, syncHistoryWithStore } from "mobx-react-router";
import heroStore from "./stores/hero.store";