Vuex Store Example

store.js

import Vue from "vue";
import Vuex from "vuex";
import _ from "lodash";

Vue.use(Vuex);
let API_URL = "http://localhost:8000/api";

export default new Vuex.Store({
    state: {
        status: false,

        token: null,
        user: null,
        sessions: [
            {
                id: 1,
                name: "2016-2017",
                start_date: "2016-01-01",
                end_date: "2016-12-31"
            },
            {
                id: 2,
                name: "2017-2018",
                start_date: "2017-01-01",
                end_date: "2018-12-31"
            },
            {
                id: 3,
                name: "2018-2019",
                start_date: "2018-01-01",
                end_date: "2019-12-31"
            },
            {
                id: 4,
                name: "2019-2020",
                start_date: "2016-01-01",
                end_date: "2016-12-31"
            },
            {
                id: 5,
                name: "2020-2021",
                start_date: "2020-01-01",
                end_date: "2021-12-31"
            }
        ],
        classes: [],
        parents: [],
        students: [],
        employees: []
    },

    mutations: {
        UPDATE_CLASS: function(state, [updatedItemIndex, updatedItem]) {
            let classes = state.classes;
            classes.splice(updatedItemIndex, 1, updatedItem);
            state.classes = classes;
        },
        SET_CLASSES: (state, payload) => (state.classes = payload),

        SET_STATUS: (state, payload) => (state.status = payload),
        SET_TOKEN: (state, payload) => (state.token = payload),
        SET_USER: (state, payload) => (state.user = payload),

        SET_STUDENTS: (state, payload) => (state.students = payload),
        SET_PARENTS: (state, payload) => (state.parents = payload),

        SET_EMPLOYEES: (state, payload) => (state.employees = payload)
    },
    getters: {
        token: state => state.token,
        // loading: state => state.loading,
        getParents: state => state.parents
    },
    actions: {
        deleteClass({ commit }, payload) {
            let classes = _.without(this.state.classes, payload);
            commit("SET_CLASSES", classes);
        },

        updateClass({ commit }, payload) {
            commit("UPDATE_CLASS", payload);
        },

        SyncStateWithLocalStorage: context => {
            context.commit("SET_TOKEN", sessionStorage.getItem("token"));
            context.commit("SET_USER", JSON.parse(sessionStorage.getItem("user")));
            context.commit("SET_CLASSES", JSON.parse(localStorage.getItem("classes")));
            context.commit("SET_PARENTS", JSON.parse(localStorage.getItem("parents")));
            context.commit("SET_STUDENTS", JSON.parse(localStorage.getItem("students")));
            context.commit("SET_EMPLOYEES", JSON.parse(localStorage.getItem("employees")));
            context.commit("SET_STATUS", true);
        },
        SyncLocalStorageWithServer: ({ dispatch, getters }) => {
            fetch(API_URL + "/whoami/", {
                method: "GET", // or 'PUT'
                headers: {
                  "Content-Type": "application/json",
                  Authorization: "JWT " + getters.token
                }
              }).then(response => {
                  response.json().then(data => {
                    localStorage.setItem("classes", JSON.stringify(data.classes));
                    localStorage.setItem("students", JSON.stringify(data.students));
                    localStorage.setItem("parents", JSON.stringify(data.parents));
                    localStorage.setItem("employees", JSON.stringify(data.employees));
                    dispatch("SyncStateWithLocalStorage");
                  });
              });
        }
        
    }
});