switching to composition API

src/components/MenuGeneralOptions.vue

@@ -1,3 +1,31 @@
+<script setup>
+  import { globalStore } from "../stores/index.js";
+  import MenuRow from "./MenuRow.vue";
+
+  const store = globalStore();
+
+  const updateCanvasHeight = (event) => {
+    const elem = event.target;
+    store.canvasHeight = elem.value;
+  };
+
+  const updateCanvasWidth = (event) => {
+    const elem = event.target;
+    store.canvasWidth = elem.value;
+  };
+
+  const updateRefreshRate = (event) => {
+    const elem = event.target;
+    store.refreshRate = elem.value;
+  };
+
+  const updateDrawingDirection = (event) => {
+    const elem = event.target;
+    const value = elem.checked ? "x" : "y";
+    store.drawingDirection = value;
+  };
+</script>
+
 <template>
   <MenuRow row-title="General Options">
     <form>
@@ -11,7 +39,7 @@
           name="canvasWidth"
           type="number"
           step="10"
-          :value="canvasWidth"
+          :value="store.canvasWidth"
           @input="updateCanvasWidth"
         />
       </div>
@@ -22,7 +50,7 @@
           name="canvasHeight"
           type="number"
           step="10"
-          :value="canvasHeight"
+          :value="store.canvasHeight"
           @input="updateCanvasHeight"
         />
       </div>
@@ -36,7 +64,7 @@
           type="number"
           min="100"
           step="100"
-          :value="refreshRate"
+          :value="store.refreshRate"
           @input="updateRefreshRate"
         />
       </div>
@@ -45,8 +73,8 @@
           >Invert Drawing Direction
           <input
             type="checkbox"
-            :checked="drawingDirection === 'x'"
-            :value="drawingDirection"
+            :checked="store.drawingDirection === 'x'"
+            :value="store.drawingDirection"
             @input="updateDrawingDirection"
           />
         </label>
@@ -54,42 +82,3 @@
     </form>
   </MenuRow>
 </template>
-
-<script>
-  import { mapWritableState } from "pinia";
-  import { globalStore } from "../stores/index.js";
-  import MenuRow from "./MenuRow.vue";
-  export default {
-    name: "MenuGeneralOptions",
-    components: {
-      MenuRow,
-    },
-    computed: {
-      ...mapWritableState(globalStore, [
-        "canvasWidth",
-        "canvasHeight",
-        "refreshRate",
-        "drawingDirection",
-      ]),
-    },
-    methods: {
-      updateCanvasHeight: function (event) {
-        const elem = event.target;
-        this.canvasHeight = elem.value;
-      },
-      updateCanvasWidth: function (event) {
-        const elem = event.target;
-        this.canvasWidth = elem.value;
-      },
-      updateRefreshRate: function (event) {
-        const elem = event.target;
-        this.refreshRate = elem.value;
-      },
-      updateDrawingDirection: function (event) {
-        const elem = event.target;
-        const value = elem.checked ? "x" : "y";
-        this.drawingDirection = value;
-      },
-    },
-  };
-</script>