rules preset in separate file

src/components/MenuElementaryCA.vue

@@ -76,115 +76,32 @@
 </template>
 
 <script>
-import { mapGetters } from "vuex";
+  import { mapActions, mapState, mapWritableState } from 'pinia'
-import MenuRow from "./MenuRow.vue";
+  import { presetRules, initialStates } from "./preset.js"
-export default {
+  import { globalStore } from "../stores/index.js";
+  import MenuRow from "./MenuRow.vue";
+  export default {
     name: "MenuElementaryCA",
     components: {
       MenuRow,
     },
     data() {
-    // TODO: Why not a getter in the store?
       return {
-      presetRules: [
+        presetRules: presetRules,
-        {
+        initialStates: initialStates,
-          name: "rule 73",
-          rules: {
-            100: 0,
-            101: 0,
-            110: 1,
-            111: 0,
-            "011": 1,
-            "010": 0,
-            "001": 0,
-            "000": 1,
-          },
-        },
-        {
-          name: "rule 86",
-          rules: {
-            100: 1,
-            101: 0,
-            110: 0,
-            111: 1,
-            "011": 0,
-            "010": 1,
-            "001": 0,
-            "000": 1,
-          },
-        },
-        {
-          name: "rule 90",
-          rules: {
-            100: 1,
-            101: 0,
-            110: 1,
-            111: 0,
-            "011": 0,
-            "010": 0,
-            "001": 1,
-            "000": 0,
-          },
-        },
-        {
-          name: "rule 45?",
-          rules: {
-            100: 0,
-            101: 0,
-            110: 1,
-            111: 0,
-            "011": 1,
-            "010": 0,
-            "001": 1,
-            "000": 1,
-          },
-        },
-        {
-          name: "rule 54?",
-          rules: {
-            100: 1,
-            101: 0,
-            110: 1,
-            111: 1,
-            "011": 0,
-            "010": 1,
-            "001": 1,
-            "000": 0,
-          },
-        },
-        {
-          name: "unknown rule",
-          rules: {
-            100: 0,
-            101: 0,
-            110: 0,
-            111: 1,
-            "011": 0,
-            "010": 0,
-            "001": 1,
-            "000": 1,
-          },
-        },
-      ],
-      initialStates: [
-        {
-          id: "onecell",
-          name: "One cell at center",
-          description: "State with a single cell in the middle",
-        },
-        {
-          id: "random",
-          name: "Random cell",
-          description: "State populated with random cells",
-        },
-      ],
       };
     },
     computed: {
-    ...mapGetters({
+      ...mapWritableState(
-      initialState: "getInitial1dState",
+        globalStore, {
-      rules: "get1dRules",
+          initialState: "initial1dState",
-    }),
+        }
+      ),
+      ...mapState(
+        globalStore, {
+          rules: "rules1d"
+        }
+      ),
       rules1dFileName() {
         return (
           Object.keys(this.rules)
@@ -196,6 +113,7 @@ export default {
       },
     },
     methods: {
+      ...mapActions(globalStore, ["draw1d", "reset"]),
       copyRules() {
         const rules = JSON.stringify(this.rules);
         navigator.clipboard.writeText(rules);
@@ -207,39 +125,28 @@ export default {
       updateSingleRule(event) {
         const elem = event.target;
         const value = elem.checked ? 1 : 0;
-      const data = { rule: elem.name, value: value };
+        this.rules.rules[elem.name] = value;
-      this.$store.commit("update1dSingleRule", data);
       },
       updateRules(event) {
-      // TODO : change this, awfully confusing
         const elem = event.target;
         const name = elem.value;
-      const rules = this.presetRules.find((ruleset) => {
+        const newRuleset = this.presetRules.find((ruleset) => {
           return ruleset.name === name;
         });
-      Object.keys(rules.rules).map((value) => {
+        this.rules.rules = newRuleset.rules
-        const data = { name: name, rule: value, value: rules.rules[value] };
-        this.$store.commit("update1dSingleRule", data);
-      });
       },
       updateInitialState(event) {
         const elem = event.target;
-      this.$store.commit("setInitial1dState", elem.value);
+        this.initial1dState = elem.value
-    },
-    draw1d() {
-      this.$store.dispatch("draw1d");
-    },
-    reset() {
-      this.$store.dispatch("reset");
       },
     },
-};
+  };
 </script>
 <style>
-.menu-row a {
+  .menu-row a {
      color: white;
      font-weight: bold;
      text-decoration: none;
      font-size: small;
-}
+  }
 </style>

src/components/preset.js

@@ -0,0 +1,95 @@
+const presetRules = [
+  {
+    name: "rule 73",
+    rules: {
+      100: 0,
+      101: 0,
+      110: 1,
+      111: 0,
+      "011": 1,
+      "010": 0,
+      "001": 0,
+      "000": 1,
+    },
+  },
+  {
+    name: "rule 86",
+    rules: {
+      100: 1,
+      101: 0,
+      110: 0,
+      111: 1,
+      "011": 0,
+      "010": 1,
+      "001": 0,
+      "000": 1,
+    },
+  },
+  {
+    name: "rule 90",
+    rules: {
+      100: 1,
+      101: 0,
+      110: 1,
+      111: 0,
+      "011": 0,
+      "010": 0,
+      "001": 1,
+      "000": 0,
+    },
+  },
+  {
+    name: "rule 45?",
+    rules: {
+      100: 0,
+      101: 0,
+      110: 1,
+      111: 0,
+      "011": 1,
+      "010": 0,
+      "001": 1,
+      "000": 1,
+    },
+  },
+  {
+    name: "rule 54?",
+    rules: {
+      100: 1,
+      101: 0,
+      110: 1,
+      111: 1,
+      "011": 0,
+      "010": 1,
+      "001": 1,
+      "000": 0,
+    },
+  },
+  {
+    name: "unknown rule",
+    rules: {
+      100: 0,
+      101: 0,
+      110: 0,
+      111: 1,
+      "011": 0,
+      "010": 0,
+      "001": 1,
+      "000": 1,
+    },
+  },
+]
+
+const initialStates = [
+  {
+    id: "onecell",
+    name: "One cell at center",
+    description: "State with a single cell in the middle",
+  },
+  {
+    id: "random",
+    name: "Random cell",
+    description: "State populated with random cells",
+  },
+]
+
+export { presetRules, initialStates }