feat: Get rid of Vuex

package.json

@@ -21,8 +21,7 @@
     "vue-class-component": "^7.2.3",
     "vue-i18n": "^8.17.0",
     "vue-property-decorator": "^8.4.1",
-    "vue-router": "^3.1.6",
-    "vuex": "^3.1.3"
+    "vue-router": "^3.1.6"
   },
   "devDependencies": {
     "@interactjs/types": "^1.9.10",

src/components/BaseButton.vue

@@ -46,7 +46,7 @@ export default class BaseButton extends Vue {
     if (!this.item) {
       return;
     }
-    if (this.$store.getters.playing > 0 && !this.$store.state.multiPlay) {
+    if (this.$status.playCount > 0 && !this.$status.multiPlay) {
       return;
     }
     let audioFilename;
@@ -63,11 +63,11 @@ export default class BaseButton extends Vue {
     audio.addEventListener("play", () => {
       this.pendingNetwork = false;
       that.playLayer += 1;
-      that.$store.commit("playOne");
+      this.$status.playCount++;
     });
     audio.addEventListener("ended", () => {
       that.playLayer -= 1;
-      that.$store.commit("stopOne");
+      this.$status.playCount--;
     });
     audio.play();
   }

src/main.ts

@@ -1,16 +1,20 @@
 import Vue from "vue";
 import App from "./App.vue";
 import router from "./router";
-import store from "./store";
 import { i18n } from "./i18n-setup";
 
 import "./registerServiceWorker";
 
+Vue.prototype.$status = {
+  multiPlay: true,
+  darkMode: false,
+  playCount: 0
+};
+
 Vue.config.productionTip = false;
 
 new Vue({
   router,
-  store,
   i18n,
   render: h => h(App)
 }).$mount("#app");

src/types.ts

@@ -3,4 +3,4 @@ export interface Sound {
   name_l10n?: { [key: string]: string };
   file: string | string[];
   type: string;
-}
+}

src/views/MainView.vue

@@ -1,10 +1,10 @@
 <template>
   <main id="page" :class="{ themeDark: darkMode, themeSystem: !darkMode }">
     <div id="settings" :title="$t('Toggle chorus mode')">
-      <input type="checkbox" id="isMutliplay" v-model="multiPlay" />
+      <input type="checkbox" value="multiPlay" v-model="settings" />
       <label for="isMutliplay">{{ $t("Do Not Click Me") }}</label>
       |
-      <input type="checkbox" id="isDarkMode" v-model="darkMode" />
+      <input type="checkbox" value="darkMode" v-model="settings" />
       <label for="isDarkMode">{{ $t("Dark Theme") }}</label>
     </div>
     <div id="mainWrapper">
@@ -82,7 +82,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
+import { Component, Vue, Watch } from "vue-property-decorator";
 import { Sound } from "../types";
 import BaseButton from "../components/BaseButton.vue";
 import { setLanguage } from "../components/setLanguage";
@@ -96,19 +96,13 @@ export default class App extends Vue {
   // @ts-ignore
   private sounds: Sound[] = [{}];
   private displayMusicBoard = false;
+  private settings: string[] = [];
+  private darkMode = false;
 
-  get multiPlay() {
-    return this.$store.state.multiPlay;
-  }
-  set multiPlay(value) {
-    this.$store.commit("setMultiPlay", value);
-  }
-
-  get darkMode() {
-    return this.$store.state.darkMode;
-  }
-  set darkMode(value) {
-    this.$store.commit("setDarkMode", value);
+  @Watch("settings")
+  private updateSettings(newValue: string[]) {
+    this.darkMode = this.$status.darkMode = newValue.includes("darkMode");
+    this.$status.multiPlay = newValue.includes("multiPlay");
   }
 
   get ehhhLocalizedName() {
@@ -127,11 +121,12 @@ export default class App extends Vue {
   }
 
   private async mounted() {
+    this.settings = ["multiPlay"];
     this.sounds = (await fetch("/sounds.json")
       .then(x => x.json())
       .catch(() => {
         // tslint:disable-next-line:no-console
-        console.error('Sound data fetch error. Exiting.');
+        console.error("Sound data fetch error. Exiting.");
       })) as Sound[];
     setLanguage(window, navigator, this);
   }

src/vue-extends.d.ts

@@ -0,0 +1,10 @@
+import Vue, { VueConstructor } from 'vue';
+
+declare module 'vue/types/vue' {
+    interface Vue {
+        $status: any;
+    }
+    interface VueConstructor {
+        $status: any;
+    }
+}

yarn.lock

@@ -9043,11 +9043,6 @@ vue@^2.6.11:
   resolved "https://registry.npm.taobao.org/vue/download/vue-2.6.11.tgz#76594d877d4b12234406e84e35275c6d514125c5"
   integrity sha1-dllNh31LEiNEBuhONSdcbVFBJcU=
 
-vuex@^3.1.3:
-  version "3.3.0"
-  resolved "https://registry.npm.taobao.org/vuex/download/vuex-3.3.0.tgz#665b4630ea1347317139fcc5cb495aab3ec5e513"
-  integrity sha1-ZltGMOoTRzFxOfzFy0laqz7F5RM=
-
 watchpack@^1.6.0:
   version "1.6.1"
   resolved "https://registry.npm.taobao.org/watchpack/download/watchpack-1.6.1.tgz?cache=0&sync_timestamp=1585253929080&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fwatchpack%2Fdownload%2Fwatchpack-1.6.1.tgz#280da0a8718592174010c078c7585a74cd8cd0e2"