wip moved canvas routine in store. it's awful

src/components/CanvasBoard.vue

@@ -0,0 +1,56 @@
+<template>
+  <main id="mainContent">
+    <canvas
+      id="canvas-board"
+      ref="canvas-board"
+      :width="canvasWidth"
+      :height="canvasHeight"
+    >
+    </canvas>
+  </main>
+</template>
+<script>
+  import { mapGetters } from "vuex";
+  export default {
+    name: "CanvasBoard",
+    computed: {
+      ...mapGetters({
+        canvasWidth: "getCanvasWidth",
+        canvasHeight: "getCanvasHeight",
+      }),
+    },
+    mounted() {
+      const canvas = document.getElementById("canvas-board")
+      const ctx = canvas.getContext("2d");
+      this.$store.commit(
+        "setCanvas",
+        canvas
+      )
+      this.$store.commit(
+        "setContext",
+        ctx
+      )
+      this.$store.commit(
+        "setCanvasWidth",
+        canvas.parentElement.clientWidth
+      );
+      this.$store.commit(
+        "setCanvasHeight",
+        canvas.parentElement.clientHeight
+      );
+      this.$store.commit(
+        "setBoardWidth",
+        canvas.parentElement.clientWidth
+      );
+      this.$store.commit(
+        "setBoardHeight",
+        canvas.parentElement.clientHeight
+      );
+    },
+  };
+</script>
+<style>
+  #mainContent {
+     min-width: 70%;
+  }
+</style>