refactor: switch from direct-vuex to vuex-typescript

`direct-vuex` is a typed wrapper around Vuex, but it has too much magic, and I can't figure out how to unit test it. `vuex-typescript` is more boilerplate, but less magic: we can still use `this.$store` as normal.

Author: arxanas

package-lock.json

@@ -12,14 +12,14 @@
   },
   "dependencies": {
     "core-js": "^2.6.11",
-    "direct-vuex": "^0.9.11",
     "mem": "^5.1.1",
     "vue": "^2.6.11",
     "vue-class-component": "^7.2.3",
     "vue-property-decorator": "^8.4.1",
     "vue-router": "^3.1.6",
     "vuetify": "^2.2.19",
-    "vuex": "^3.1.3"
+    "vuex": "^3.1.3",
+    "vuex-typescript": "^3.0.2"
   },
   "devDependencies": {
     "@commitlint/cli": "^8.3.5",

package.json

@@ -69,7 +69,7 @@ a {
 <script lang="ts">
 import Vue from "vue";
 import Component from "vue-class-component";
-import { getStore } from "./store";
+import { dispatchRestoreState, dispatchSaveState } from "./store";
 
 @Component({ name: "App" })
 export default class extends Vue {
@@ -80,8 +80,7 @@ export default class extends Vue {
   }
 
   public async mounted() {
-    const store = getStore();
-    await store.dispatch.restoreState();
+    await dispatchRestoreState(this.$store);
   }
 }
 </script>

src/App.vue

@@ -37,7 +37,12 @@
 import Vue from "vue";
 import Component from "vue-class-component";
 import { Prop } from "vue-property-decorator";
-import { getStore } from "../../store";
+import {
+  commitSelectCharacter,
+  commitUnselectCharacter,
+  dispatchSaveState,
+  readSelectedCharacters,
+} from "../../store";
 import {
   allCharacterMetadata,
   CharacterId,
@@ -66,21 +71,22 @@ export default class extends Vue {
   }
 
   get selectedCharacterId() {
-    return getStore().state.local.selectedCharacters[this.gameId];
+    const selectedCharacters = readSelectedCharacters(this.$store);
+    return selectedCharacters[this.gameId];
   }
 
   public async onChange(
     characterId: CharacterId<GameId> | undefined,
   ): Promise<void> {
     if (characterId !== undefined) {
-      getStore().commit.selectCharacter({
+      commitSelectCharacter(this.$store, {
         gameId: this.gameId,
         characterId,
       });
     } else {
-      getStore().commit.unselectCharacter(this.gameId);
+      commitUnselectCharacter(this.$store, this.gameId);
     }
-    await getStore().dispatch.saveState();
+    await dispatchSaveState(this.$store);
   }
 
   public filter(

src/components/training/CharacterSelector.vue

@@ -81,10 +81,10 @@
 </template>
 
 <script lang="ts">
-import { getStore } from "@/store";
 import { allCharacterMetadata, GameId } from "@/tech/AllCharacterMetadata";
 import Vue from "vue";
 import Component from "vue-class-component";
+import { dispatchRestoreState, readSelectedCharacters } from "../../store";
 import CharacterSelector from "./CharacterSelector.vue";
 import TrainingPerformanceSelector from "./TrainingPerformanceSelector.vue";
 
@@ -99,7 +99,8 @@ export default class extends Vue {
   public value: number | null | undefined = null;
 
   get selectedCharacter() {
-    return getStore().state.local.selectedCharacters[this.gameId];
+    const selectedCharacters = readSelectedCharacters(this.$store);
+    return selectedCharacters[this.gameId];
   }
 
   get selectedCharacterName(): string {
@@ -112,7 +113,7 @@ export default class extends Vue {
   }
 
   public async created() {
-    await getStore().dispatch.restoreState();
+    await dispatchRestoreState(this.$store);
     if (this.selectedCharacter === null) {
       this.value = 2;
     }

src/components/training/TrainingHeader.vue

@@ -46,7 +46,6 @@
 </template>
 
 <script lang="ts">
-import { getStore } from "@/store";
 import allTechData, { getTechMetadata, TechId } from "@/tech/AllTechMetadata";
 import {
   AllTechVariants,

src/components/training/TrainingPanel.vue

@@ -8,7 +8,7 @@ Vue.config.productionTip = false;
 
 new Vue({
   router,
-  store: store.original,
+  store,
   vuetify,
   render: h => h(App),
 }).$mount("#app");

src/main.ts

@@ -5,9 +5,9 @@ import {
   Performance,
   updateItem,
 } from "@/tech/SpacedRepetition";
-import { createDirectStore } from "direct-vuex";
 import Vue from "vue";
 import Vuex, { ActionContext } from "vuex";
+import { getStoreAccessors } from "vuex-typescript";
 import {
   CharacterId,
   GameAndCharacterId,
@@ -32,7 +32,7 @@ export interface PracticeSet<T extends TechId> {
   timestamp: number;
 }
 
-interface State {
+interface MainState {
   version: 1;
   local: {
     loaded: boolean;
@@ -44,7 +44,13 @@ interface State {
   };
 }
 
-const defaultState: State = {
+interface RootState {
+  modules: {
+    main: MainState;
+  };
+}
+
+const defaultState: MainState = {
   version: 1,
   local: {
     loaded: false,
@@ -60,11 +66,24 @@ const defaultState: State = {
 
 Vue.use(Vuex);
 
-const { store } = createDirectStore({
+type MainContext = ActionContext<MainState, RootState>;
+
+const mainStore = {
+  namespaced: true,
   state: defaultState,
   getters: {
+    selectedCharacters(
+      state: MainState,
+    ): MainState["local"]["selectedCharacters"] {
+      return state.local.selectedCharacters;
+    },
+    recordedPracticeSets(
+      state: MainState,
+    ): MainState["remote"]["recordedPracticeSets"] {
+      return state.remote.recordedPracticeSets;
+    },
     spacedRepetitionItems(
-      state: State,
+      state: MainState,
     ): Map<SerializedTechVariant, SpacedRepetitionItem> {
       const result = new Map<SerializedTechVariant, SpacedRepetitionItem>();
       for (const practiceSet of state.remote.recordedPracticeSets) {
@@ -86,7 +105,7 @@ const { store } = createDirectStore({
   },
   mutations: {
     selectCharacter<T extends GameId>(
-      state: State,
+      state: MainState,
       gameAndCharacterId: GameAndCharacterId<T>,
     ): void {
       const { gameId, characterId } = gameAndCharacterId;
@@ -96,25 +115,25 @@ const { store } = createDirectStore({
       // with `characterId as CharacterId<typeof gameId>` doesn't work.
       selectedCharacters[gameId] = characterId;
     },
-    unselectCharacter(state: State, gameId: GameId): void {
+    unselectCharacter(state: MainState, gameId: GameId): void {
       state.local.selectedCharacters[gameId] = null;
     },
     recordPracticeSet<T extends TechId>(
-      state: State,
+      state: MainState,
       practiceSet: PracticeSet<T>,
     ): void {
       state.remote.recordedPracticeSets.push(practiceSet);
     },
-    restoreState(state: State, newState: State) {
+    restoreState(state: MainState, newState: MainState) {
       Object.assign(state, newState);
     },
   },
   actions: {
-    async saveState(context: ActionContext<State, {}>): Promise<void> {
+    async saveState(context: MainContext): Promise<void> {
       const state = { ...context.state, loaded: false };
       localStorage.setItem("state", JSON.stringify(state));
     },
-    async restoreState(context: ActionContext<State, {}>): Promise<void> {
+    async restoreState(context: MainContext): Promise<void> {
       if (context.state.local.loaded) {
         return;
       }
@@ -123,7 +142,7 @@ const { store } = createDirectStore({
       if (previousStateString === null) {
         return;
       }
-      const previousState: State = JSON.parse(previousStateString);
+      const previousState: MainState = JSON.parse(previousStateString);
       const oldVersion: number = previousState.version;
       const currentVersion = context.state.version;
       if (oldVersion !== currentVersion) {
@@ -140,12 +159,41 @@ const { store } = createDirectStore({
       });
     },
   },
+};
+
+export type MainStore = typeof mainStore;
+
+const rootStore = new Vuex.Store({
+  modules: {
+    main: mainStore,
+  },
 });
 
-export default store;
+export type RootStore = typeof rootStore;
 
-export type Store = typeof store;
+export default rootStore;
 
-export function getStore(): Store {
-  return store;
-}
+const { commit, read, dispatch } = getStoreAccessors<MainState, RootState>(
+  "main",
+);
+
+export const readSpacedRepetitionItems = read(
+  mainStore.getters.spacedRepetitionItems,
+);
+export const readRecordedPracticeSets = read(
+  mainStore.getters.recordedPracticeSets,
+);
+export const readSelectedCharacters = read(
+  mainStore.getters.selectedCharacters,
+);
+export const dispatchRestoreState = dispatch(mainStore.actions.restoreState);
+export const dispatchSaveState = dispatch(mainStore.actions.saveState);
+export const commitRecordPracticeSet = commit(
+  mainStore.mutations.recordPracticeSet,
+);
+export const commitSelectCharacter = commit(
+  mainStore.mutations.selectCharacter,
+);
+export const commitUnselectCharacter = commit(
+  mainStore.mutations.unselectCharacter,
+);