added persistence plugin to store

src/App.vue

@@ -70,15 +70,6 @@ export default {
     }
   },
   mounted() {
-    if (localStorage.background !== undefined) {
-      this.$store.commit("setBackground", JSON.parse(localStorage.background));
-    }
-    if (localStorage.isPublic !== undefined) {
-      this.$store.commit("showGrimoire", JSON.parse(localStorage.isPublic));
-    }
-    if (localStorage.edition) {
-      this.$store.commit("setEdition", localStorage.edition);
-    }
     if (localStorage.players) {
       this.players = JSON.parse(localStorage.players).map(player => ({
         ...player,
@@ -119,19 +110,6 @@ export default {
         );
       },
       deep: true
-    },
-    edition(newEdition) {
-      localStorage.edition = newEdition;
-    },
-    isPublic(newIsPublic) {
-      localStorage.isPublic = JSON.stringify(newIsPublic);
-    },
-    background(newBackground) {
-      if (newBackground) {
-        localStorage.background = JSON.stringify(newBackground);
-      } else {
-        localStorage.removeItem("background");
-      }
     }
   }
 };

src/store/index.js

@@ -1,12 +1,14 @@
 import Vue from "vue";
 import Vuex from "vuex";
+import persistence from "./persistence";
 import editionJSON from "../editions.json";
 import rolesJSON from "../roles.json";
 
 Vue.use(Vuex);
 
 const getRolesByEdition = (edition = "tb") => {
-  const selectedEdition = editionJSON.find(({ id }) => id === edition);
+  const selectedEdition =
+    editionJSON.find(({ id }) => id === edition) || editionJSON[0];
   return new Map(
     rolesJSON
       .filter(
@@ -73,5 +75,6 @@ export default new Vuex.Store({
       state.modals.edition = false;
       state.roles = getRolesByEdition(edition);
     }
-  }
+  },
+  plugins: [persistence]
 });

src/store/persistence.js

@@ -0,0 +1,34 @@
+module.exports = store => {
+  if (localStorage.background !== undefined) {
+    store.commit("setBackground", localStorage.background);
+  }
+  if (localStorage.isPublic !== undefined) {
+    store.commit("showGrimoire", JSON.parse(localStorage.isPublic));
+  }
+  if (localStorage.edition !== undefined) {
+    store.commit("setEdition", localStorage.edition);
+  }
+
+  store.subscribe(({ type, payload }, state) => {
+    switch (type) {
+      case "toggleGrimoire":
+      case "showGrimoire":
+        localStorage.setItem(
+          "isPublic",
+          JSON.stringify(state.grimoire.isPublic)
+        );
+        break;
+      case "setBackground":
+        if (payload) {
+          localStorage.setItem("background", payload);
+        } else {
+          localStorage.removeItem("background");
+        }
+        break;
+      case "setEdition":
+        localStorage.setItem("edition", payload);
+        break;
+    }
+    console.log(type, payload);
+  });
+};