modules index.js

/* eslint-disable no-unused-vars */
import Vue from "vue";
import Vuex from "vuex";
import habit from "@/store/modules/habit.js";
import habitLogs from "@/store/modules/habitLogs.js";
import habitSection from "@/store/modules/habitSection.js";
import VuexORM from "@vuex-orm/core";
import Habit from "@/models/Habit";
import HabitLog from "@/models/HabitLog";
import Category from "../models/Category";

Vue.use(Vuex);

// Create a new instance of Database.
const database = new VuexORM.Database();
// Register Vuex-ORM Models to Database.
database.register(Habit, habit);
database.register(HabitLog);
database.register(Category, habitSection);

// Avoiding nested structure using normalized data
// https://forum.vuejs.org/t/vuex-best-practices-for-complex-objects/10143

// Create Vuex Store and register database through Vuex ORM.
const store = new Vuex.Store({
  modules: { habitLogs },
  plugins: [VuexORM.install(database)],
  state: {
    dayOverview: [],
    selectedCell: null,
    baseSorting: [
      { id: 1, habits: [4, 3, 5] },
      { id: 2, habits: [6, 8, 7] },
    ]
  },
  mutations: {
    SET_DAY_OVERVIEW(state, dayArray) {
      state.dayOverview = dayArray;
    },
    SET_SELECTED_CELL(state, { habit, moment, log }) {
      state.selectedCell = { habit, moment, log };
    },
    CLEAR_SELECTED_CELL(state) {
      state.selectedCell = null;
    },
  },
  getters: {
    dayOverview: state => {
      return state.dayOverview;
    },
    sortedSections: state => {
      const sectionArray = state.baseSorting.map(obj => obj.id);
      return Category.query()
        .whereIdIn(sectionArray)
        .get();
    },
    sortedHabits: state => sectionId => {
      // Retuns an array of habit Ids: [1,3,4]
      const habitArray = state.baseSorting.find(section => section.id == sectionId).habits;
      return Habit.query()
        .with("logs")
        .whereIdIn(habitArray)
        .get();
    }
  }
});

export default store;