adapted components to pinia

src/components/MenuGeneralOptions.vue

@@ -56,40 +56,43 @@
 </template>
 
 <script>
-import MenuRow from "./MenuRow.vue";
-import { mapGetters } from "vuex";
-export default {
-  name: "MenuGeneralOptions",
-  components: {
-    MenuRow,
-  },
-  computed: {
-    ...mapGetters({
-      canvasWidth: "getCanvasWidth",
-      canvasHeight: "getCanvasHeight",
-      refreshRate: "getRefreshRate",
-      drawingDirection: "getDrawingDirection",
-    }),
-  },
-  methods: {
-    updateCanvasHeight: function (event) {
-      const elem = event.target;
-      this.$store.commit("setCanvasHeight", elem.value);
+  import { mapWritableState } from 'pinia'
+  import { globalStore } from "../stores/index.js";
+  import MenuRow from "./MenuRow.vue";
+  export default {
+    name: "MenuGeneralOptions",
+    components: {
+      MenuRow,
     },
-    updateCanvasWidth: function (event) {
-      const elem = event.target;
-      this.$store.commit("setCanvasWidth", elem.value);
+    computed: {
+      ...mapWritableState(
+        globalStore,
+        [
+          "canvasWidth",
+          "canvasHeight",
+          "refreshRate",
+          "drawingDirection"
+      ]
+      ),
     },
-    updateRefreshRate: function (event) {
-      const elem = event.target;
-      this.$store.commit("setRefreshRate", elem.value);
+    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
+      },
     },
-    updateDrawingDirection: function (event) {
-      const elem = event.target;
-      const value = elem.checked ? "x" : "y";
-      this.$store.commit("setDrawingDirection", value);
-      console.log(this.drawingDirection);
-    },
-  },
-};
+  };
 </script>