diff --git a/src/App.vue b/src/App.vue index aacbeb6..752d5e8 100644 --- a/src/App.vue +++ b/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"); - } } } }; diff --git a/src/store/index.js b/src/store/index.js index 47554cf..47741cb 100644 --- a/src/store/index.js +++ b/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] }); diff --git a/src/store/persistence.js b/src/store/persistence.js new file mode 100644 index 0000000..f537262 --- /dev/null +++ b/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); + }); +};