Browse Source

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

kb/add-usage-guide
Matthew Aaron Raymer 2 years ago
parent
commit
3c388da22d
  1. 69
      package-lock.json
  2. 2
      package.json
  3. 2
      src/main.ts
  4. 19
      src/store/account.ts

69
package-lock.json

@ -30,6 +30,8 @@
"luxon": "^3.1.1", "luxon": "^3.1.1",
"merkle-tools": "^1.4.1", "merkle-tools": "^1.4.1",
"papaparse": "^5.3.2", "papaparse": "^5.3.2",
"pina": "^0.20.2204228",
"pinia-plugin-persistedstate": "^3.0.1",
"ramda": "^0.28.0", "ramda": "^0.28.0",
"readable-stream": "^4.2.0", "readable-stream": "^4.2.0",
"reflect-metadata": "^0.1.13", "reflect-metadata": "^0.1.13",
@ -19931,6 +19933,71 @@
"node": ">=0.10.0" "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": { "node_modules/pirates": {
"version": "4.0.5", "version": "4.0.5",
"resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.5.tgz", "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.5.tgz",
@ -24286,7 +24353,7 @@
"version": "4.9.3", "version": "4.9.3",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.3.tgz", "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.3.tgz",
"integrity": "sha512-CIfGzTelbKNEnLpLdGFgdyKhG23CKdKgQPOBc+OUNrkJ2vr+KSzsSV5kq5iWhEQbok+quxgGzrAtGWCyU7tHnA==", "integrity": "sha512-CIfGzTelbKNEnLpLdGFgdyKhG23CKdKgQPOBc+OUNrkJ2vr+KSzsSV5kq5iWhEQbok+quxgGzrAtGWCyU7tHnA==",
"dev": true, "devOptional": true,
"bin": { "bin": {
"tsc": "bin/tsc", "tsc": "bin/tsc",
"tsserver": "bin/tsserver" "tsserver": "bin/tsserver"

2
package.json

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

2
src/main.ts

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

19
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: "",
});
},
},
});
Loading…
Cancel
Save