First step from vuex to pinia

web/src/stores/budgets.ts

@@ -0,0 +1,16 @@
+import { defineStore } from "pinia";
+
+interface State {
+    CurrentBudgetID: string | null,
+}
+
+export const useBudgetsStore = defineStore('budget', {
+    state: (): State => ({
+      CurrentBudgetID: null  
+    }),
+    actions: {
+        setCurrentBudgetID(budgetid : string) {
+            this.CurrentBudgetID = budgetid;
+        },
+    }
+})

web/src/stores/session.ts

@@ -0,0 +1,69 @@
+import { defineStore } from 'pinia'
+
+interface State {
+    Token: string | null
+    User: string | null
+    Budgets: Map<string, Budget>,
+}
+
+export interface Budget {
+    ID: string
+    Name: string
+    AvailableBalance: number
+}
+
+export const useSessionStore = defineStore('session', {
+    // convert to a function
+    state: (): State => ({
+        Token: null,
+        User: null,
+        Budgets: new Map<string, Budget>(),
+    }),
+    getters: {
+        Budgets(): IterableIterator<Budget> {
+            return this.Budgets.values();
+        },
+        /*// must define return type because of using `this`
+        fullUserDetails (state): FullUserDetails {
+          // import from other stores
+          const authPreferencesStore = useAuthPreferencesStore()
+          const authEmailStore = useAuthEmailStore()
+          return {
+            ...state,
+            // other getters now on `this`
+            fullName: this.fullName,
+            ...authPreferencesStore.$state,
+            ...authEmailStore.details
+          }
+    
+          // alternative if other modules are still in Vuex
+          // return {
+          //   ...state,
+          //   fullName: this.fullName,
+          //   ...vuexStore.state.auth.preferences,
+          //   ...vuexStore.getters['auth/email'].details
+          // }
+        }*/
+    },
+    actions: {
+        loginSuccess(x : any) {
+            this.User = x.User;
+            this.Token = x.Token;
+            this.Budgets = x.Budgets;
+        },
+        login(login: any) {
+            return fetch("/api/v1/user/login", { method: "POST", body: JSON.stringify(login) })
+                .then(x => x.json())
+                .then(x => this.loginSuccess(x));
+        },
+        register(login : any) {
+            return fetch("/api/v1/user/register", { method: "POST", body: JSON.stringify(login) })
+                .then(x => x.json())
+                .then(x => this.loginSuccess(x))
+        },
+        // easily reset state using `$reset`
+        logout() {
+            this.$reset()
+        }
+    }
+})

web/src/stores/settings.ts

@@ -0,0 +1,21 @@
+import { defineStore } from "pinia";
+
+interface State {
+    ShowMenu?: boolean,
+    ExpandMenu?: boolean,
+}
+
+export const useSettingsStore = defineStore('settings', {
+    state: (): State => ({
+        ShowMenu: undefined,
+        ExpandMenu: false,
+    }),
+    actions: {
+        toggleMenu() {
+            this.ShowMenu = !this.ShowMenu;
+        },
+        toggleMenuSize() {
+            this.ExpandMenu = !this.ExpandMenu;
+        },
+    }
+});