Added Pinia in addition to Vuex for state-management. Will migrate to Pinia eventually

package-lock.json

@@ -30,6 +30,8 @@
         "luxon": "^3.1.1",
         "merkle-tools": "^1.4.1",
         "papaparse": "^5.3.2",
+        "pina": "^0.20.2204228",
+        "pinia-plugin-persistedstate": "^3.0.1",
         "ramda": "^0.28.0",
         "readable-stream": "^4.2.0",
         "reflect-metadata": "^0.1.13",
@@ -19931,6 +19933,71 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/pina": {
+      "version": "0.20.2204228",
+      "resolved": "https://registry.npmjs.org/pina/-/pina-0.20.2204228.tgz",
+      "integrity": "sha512-osNVZg36DsDAEPHskmnTINhM5APSLsu+y8guYYX65nidbRPmnv/trAoPnacpfh8aCpsowGWR/DAYtQHZyZq8wQ=="
+    },
+    "node_modules/pinia": {
+      "version": "2.0.27",
+      "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.0.27.tgz",
+      "integrity": "sha512-nOnXP0OFeL8R4WjAHsterU+11vptda643gH02xKNtSCDPiRzVfRYodOLihLDoa0gL1KKuQKV+KOzEgdt3YvqEw==",
+      "peer": true,
+      "dependencies": {
+        "@vue/devtools-api": "^6.4.5",
+        "vue-demi": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.4.0",
+        "typescript": ">=4.4.4",
+        "vue": "^2.6.14 || ^3.2.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        },
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/pinia-plugin-persistedstate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/pinia-plugin-persistedstate/-/pinia-plugin-persistedstate-3.0.1.tgz",
+      "integrity": "sha512-WRNWtR4v8StJqBQH+Qiz88SGnlr4wvEyh7wtA+fYEVLoIOnpZ0v4FICvUcC8eUkAIvQL3n6/Ew2yryw7okazvA==",
+      "peerDependencies": {
+        "pinia": "^2.0.0"
+      }
+    },
+    "node_modules/pinia/node_modules/vue-demi": {
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
+      "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
+      "hasInstallScript": true,
+      "peer": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/pirates": {
       "version": "4.0.5",
       "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.5.tgz",
@@ -24286,7 +24353,7 @@
       "version": "4.9.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.3.tgz",
       "integrity": "sha512-CIfGzTelbKNEnLpLdGFgdyKhG23CKdKgQPOBc+OUNrkJ2vr+KSzsSV5kq5iWhEQbok+quxgGzrAtGWCyU7tHnA==",
-      "dev": true,
+      "devOptional": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"

package.json

@@ -30,6 +30,8 @@
     "luxon": "^3.1.1",
     "merkle-tools": "^1.4.1",
     "papaparse": "^5.3.2",
+    "pina": "^0.20.2204228",
+    "pinia-plugin-persistedstate": "^3.0.1",
     "ramda": "^0.28.0",
     "readable-stream": "^4.2.0",
     "reflect-metadata": "^0.1.13",

src/main.ts

@@ -1,3 +1,4 @@
+import { createPinia } from "pinia";
 import { createApp } from "vue";
 import App from "./App.vue";
 import "./registerServiceWorker";
@@ -50,5 +51,6 @@ import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 createApp(App)
   .component("fa", FontAwesomeIcon)
   .use(store)
+  .use(createPinia())
   .use(router)
   .mount("#app");

src/store/account.ts

@@ -0,0 +1,19 @@
+// @ts-check
+import { defineStore } from "pinia";
+
+export const useAccountStore = defineStore({
+  id: "account",
+  state: () => ({
+    firstName: "",
+    lastName: "",
+  }),
+
+  actions: {
+    reset() {
+      this.$patch({
+        firstName: "",
+        lastName: "",
+      });
+    },
+  },
+});