adapted components to pinia

src/components/CanvasBoard.vue

@@ -9,6 +9,8 @@
   </main>
 </template>
 <script>
+  import { mapActions, mapState, mapWritableState } from 'pinia'
+  import { globalStore } from "../stores/index.js";
   import {
     create1dState,
     create1dStateOneCell,
@@ -18,7 +20,7 @@ import {
     evolve2d,
   } from "../modules/automata.js";
   import { getRandomInt, sleep } from "../modules/common.js";
-import { mapGetters } from "vuex";
+
   export default {
     name: "CanvasBoard",
     data() {
@@ -28,20 +30,22 @@ export default {
       };
     },
     computed: {
-    ...mapGetters({
-      cellProperties: "getCellProperties",
-      rules: "get1dRules",
-      canvasWidth: "getCanvasWidth",
-      canvasHeight: "getCanvasHeight",
-      refreshRate: "getRefreshRate",
-      initial1dState: "getInitial1dState",
-      drawingDirection: "getDrawingDirection",
-      canDraw: "getCanDraw",
-      lastBoard: "getLastBoard",
-      getDraw1d: "getDraw1d",
-      getDraw2d: "getDraw2d",
-      getDraw2dLast: "getDraw2dLast",
-      getReset: "getReset",
+      ...mapState(globalStore, {
+        cellProperties: "cellProperties",
+        rules: "rules1d",
+        refreshRate: "refreshRate",
+        initial1dState: "initial1dState",
+        drawingDirection: "drawingDirection",
+        canDraw: "canDraw",
+        getDraw1d: "draw1d",
+        getDraw2d: "draw2d",
+        getDraw2dLast: "draw2dLast",
+      }),
+      ...mapWritableState(globalStore, {
+        lastBoard: "lastBoard",
+        canvasWidth: "canvasWidth",
+        canvasHeight: "canvasHeight",
+        getReset: "reset",
       }),
       boardWidth: function () {
         return Math.floor(this.canvasWidth / this.cellProperties.size);
@@ -67,13 +71,11 @@ export default {
     mounted() {
       this.canvas = Object.freeze(document.getElementById("canvas-board"));
       this.ctx = this.canvas.getContext("2d");
-    this.$store.commit("setCanvasWidth", this.canvas.parentElement.clientWidth);
-    this.$store.commit(
-      "setCanvasHeight",
-      this.canvas.parentElement.clientHeight
-    );
+      this.canvasWidth = this.canvas.parentElement.clientWidth
+      this.canvasHeight = this.canvas.parentElement.clientHeight
     },
     methods: {
+      ...mapActions(globalStore, ["toggleStop"]),
       drawCanvas(board) {
         const props = this.cellProperties;
         board.map((row, y) => {
@@ -102,9 +104,9 @@ export default {
           this.rules.rules,
           this.boardWidth
         );
-      this.$store.commit("setLastBoard", Object.freeze(board));
+        this.lastBoard = Object.freeze(board)
         this.drawCanvas(board);
-      this.$store.dispatch("stop");
+        this.toggleStop()
       },
       draw2d(board) {
         if (!this.canDraw) return;
@@ -125,16 +127,17 @@ export default {
           [0, 2]
         );
         const board = evolve2d(initialState, conwayRules);
-      this.$store.commit("setLastBoard", Object.freeze(board));
+        this.lastBoard = Object.freeze(board)
         this.draw2d(board);
       },
       async draw2dLast() {
+        if (this.lastBoard != undefined)
           this.draw2d(this.lastBoard);
       },
       reset() {
-      this.$store.dispatch("stop");
+        this.toggleStop()
         this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
-      this.$store.commit("toggleReset", 0);
+        this.getReset = 0
       },
     },
   };

src/components/Menu2dCA.vue

@@ -2,55 +2,40 @@
   <MenuRow row-title="2D Cellular Automata">
     <div class="form-field">
       <label>Start from last result</label>
-      <input type="button" value="start" @click="draw2dLast" />
+      <input type="button" value="start" @click="toggleDraw2dLast()" />
     </div>
     <div class="form-field">
-      <input type="button" name="start2d" value="start" @click="draw2d" />
+      <input type="button" name="start2d" value="start" @click="toggleDraw2d()" />
       <input
         type="button"
         name="stop"
         class="stop"
         value="stop"
-        @click="stop"
+        @click="toggleStop()"
       />
       <input
         type="button"
         name="reset"
         class="reset"
         value="reset"
-        @click="reset"
+        @click="toggleReset()"
       />
     </div>
   </MenuRow>
 </template>
 
 <script>
+  import { mapActions } from "pinia";
   import MenuRow from "./MenuRow.vue";
-import { mapGetters } from "vuex";
+  import { globalStore } from "../stores/index.js";
 
   export default {
     name: "Menu2dCA",
     components: {
       MenuRow,
     },
-  computed: {
-    ...mapGetters({
-      lastBoard: "getLastBoard",
-    }),
-  },
     methods: {
-    draw2d() {
-      this.$store.dispatch("draw2d");
-    },
-    draw2dLast() {
-      this.$store.dispatch("draw2dLast");
-    },
-    reset() {
-      this.$store.dispatch("reset");
-    },
-    stop() {
-      this.$store.dispatch("stop");
-    },
+      ...mapActions(globalStore, ["toggleDraw2d", "toggleDraw2dLast", "toggleReset", "toggleStop"]),
     },
   };
 </script>

src/components/MenuCellProperties.vue

@@ -34,28 +34,26 @@
 </template>
 
 <script>
+  import { mapWritableState } from 'pinia'
+  import { globalStore } from "../stores/index.js";
   import MenuRow from "./MenuRow.vue";
   export default {
     name: "MainMenu",
     components: {
       MenuRow,
     },
-  data() {
-    return {
-      cellProperties: this.$store.state.cellProperties,
-    };
+    computed: {
+      ...mapWritableState(globalStore, ["cellProperties"])
     },
     methods: {
       getCellProperties(event) {
         const elem = event.target;
-      const prop = this.$store.state.cellProperties;
+        const prop = this.cellProperties;
         return prop[elem.name];
       },
       updateCellProperties(event) {
         const elem = event.target;
-      const prop = { name: elem.name, value: elem.value };
-      //console.log(prop)
-      this.$store.commit("setCellProperties", prop);
+        this.cellProperties[elem.name] = elem.value;
       },
     },
   };

src/components/MenuElementaryCA.vue

@@ -63,20 +63,20 @@
       </div>
     </form>
     <div class="form-field">
-      <input type="button" name="start" value="start" @click="draw1d" />
+      <input type="button" name="start" value="start" @click="toggleDraw1d()" />
       <input
         type="button"
         name="reset"
         class="reset"
         value="reset"
-        @click="reset"
+        @click="toggleReset"
       />
     </div>
   </MenuRow>
 </template>
 
 <script>
-  import { mapActions, mapState, mapWritableState } from 'pinia'
+  import { mapActions, mapWritableState } from 'pinia'
   import { presetRules, initialStates } from "./preset.js"
   import { globalStore } from "../stores/index.js";
   import MenuRow from "./MenuRow.vue";
@@ -95,14 +95,11 @@
       ...mapWritableState(
         globalStore, {
           initialState: "initial1dState",
-        }
-      ),
-      ...mapState(
-        globalStore, {
           rules: "rules1d"
         }
       ),
       rules1dFileName() {
+        // TODO: broken
         return (
           Object.keys(this.rules)
                 .map((index) => {
@@ -113,7 +110,7 @@
       },
     },
     methods: {
-      ...mapActions(globalStore, ["draw1d", "reset"]),
+      ...mapActions(globalStore, ["toggleDraw1d", "toggleReset"]),
       copyRules() {
         const rules = JSON.stringify(this.rules);
         navigator.clipboard.writeText(rules);

src/components/MenuGeneralOptions.vue

@@ -56,39 +56,42 @@
 </template>
 
 <script>
+  import { mapWritableState } from 'pinia'
+  import { globalStore } from "../stores/index.js";
   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",
-    }),
+      ...mapWritableState(
+        globalStore,
+        [
+          "canvasWidth",
+          "canvasHeight",
+          "refreshRate",
+          "drawingDirection"
+      ]
+      ),
     },
     methods: {
       updateCanvasHeight: function (event) {
         const elem = event.target;
-      this.$store.commit("setCanvasHeight", elem.value);
+        this.canvasHeight = elem.value
       },
       updateCanvasWidth: function (event) {
         const elem = event.target;
-      this.$store.commit("setCanvasWidth", elem.value);
+        this.canvasWidth = elem.value
       },
       updateRefreshRate: function (event) {
         const elem = event.target;
-      this.$store.commit("setRefreshRate", elem.value);
+        this.refreshRate = elem.value;
       },
       updateDrawingDirection: function (event) {
         const elem = event.target;
         const value = elem.checked ? "x" : "y";
-      this.$store.commit("setDrawingDirection", value);
-      console.log(this.drawingDirection);
+        this.drawingDirection = value
       },
     },
   };

src/components/MenuRow.vue

@@ -10,7 +10,8 @@
 </template>
 
 <script>
-import { mapGetters } from "vuex";
+  import { mapWritableState } from 'pinia'
+  import { globalStore } from "../stores/index.js";
   
   export default {
     name: "MenuRow",
@@ -21,16 +22,15 @@ export default {
       },
     },
     computed: {
-    ...mapGetters({
-      activeMenu: "getActiveMenu",
-    }),
+      // TODO: should be passed as a props/slot, not in a store
+      ...mapWritableState(globalStore, ["activeMenu"])
     },
     methods: {
       updateActiveMenu(event) {
         const elem = event.target;
         const value = elem.id;
-      if (value == this.activeMenu) this.$store.commit("setActiveMenu", "");
-      else this.$store.commit("setActiveMenu", value);
+        if (value == this.activeMenu) this.activeMenu = ""
+        else this.activeMenu = value
       },
     },
   };

src/stores/index.js

@@ -38,22 +38,22 @@ export const globalStore = defineStore("globalStore", {
     }
   },
   actions: {
-    draw1d() {
+    toggleDraw1d() {
       this.draw1d = true;
     },
-    draw2d() {
+    toggleDraw2d() {
       this.canDraw = true;
       this.draw2d = true;
     },
-    draw2dLast() {
+    toggleDraw2dLast() {
       this.canDraw = true;
       this.draw2dLast = true;
     },
-    reset() {
-      this.stop();
+    toggleReset() {
+      this.toggleStop();
       this.reset = true;
     },
-    stop() {
+    toggleStop() {
       this.draw1d = false;
       this.draw2d = false;
       this.draw2dLast = false;