Do not use useStorage for root state

web/src/stores/session.ts

@@ -1,13 +1,17 @@
-import { useStorage } from '@vueuse/core';
+import { StorageSerializers, useStorage } from '@vueuse/core';
 import { defineStore } from 'pinia'
 import { useAPI } from './api';
 
 interface State {
-    Token: string | null
-    User: string | null
+    Session: Session | null
     Budgets: Map<string, Budget>,
 }
 
+interface Session {
+    Token: string
+    User: string
+}
+
 export interface Budget {
     ID: string
     Name: string
@@ -15,23 +19,24 @@ export interface Budget {
 }
 
 export const useSessionStore = defineStore('session', {
-    state: () => useStorage<State>('session', {
-        Token: null,
-        User: null,
-        Budgets: new Map<string, Budget>(),
+    state: () => ({
+        Session: useStorage<Session>('session', null, undefined, { serializer: StorageSerializers.object }),
+        Budgets: useStorage<Map<string, Budget>>('budgets', new Map<string, Budget>()),
     }),
     getters: {
         BudgetsList: (state) => [ ...state.Budgets.values() ],
-        AuthHeaders: (state) => ({'Authorization': 'Bearer ' + state.Token}),
-        LoggedIn: (state) => state.Token != null,
+        AuthHeaders: (state) => ({'Authorization': 'Bearer ' + state.Session.Token}),
+        LoggedIn: (state) => state.Session != null,
     },
     actions: {
         setTitle(title : string) {
             document.title = "Budgeteer - " + title;
         },
         loginSuccess(x : any) {
-            this.User = x.User;
-            this.Token = x.Token;
+            this.Session = {
+                User: x.User,
+                Token: x.Token,
+            },
             this.Budgets = x.Budgets;
         },
         async login(login: any) {