Do not use useStorage for root state

web/src/stores/budget.ts

@@ -1,4 +1,3 @@
-import { useStorage } from "@vueuse/core";
 import { defineStore } from "pinia";
 import { useAPI } from "./api";
 import { useAccountStore } from "./budget-account";
@@ -9,7 +8,7 @@ interface State {
 }
 
 export const useBudgetsStore = defineStore('budget', {
-    state: () => useStorage<State>('budget', {
+    state: () => ({
         CurrentBudgetID: null,
     }),
     getters: {

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) {

web/src/stores/settings.ts

@@ -2,21 +2,27 @@ import { useStorage } from "@vueuse/core";
 import { defineStore } from "pinia";
 
 interface State {
-    ShowMenu: boolean | null,
-    ExpandMenu: boolean,
+    Menu: MenuSettings
+}
+
+interface MenuSettings {
+    Show: boolean | null,
+    Expand: boolean | null,
 }
 
 export const useSettingsStore = defineStore('settings', {
-    state: () => useStorage<State>('settings', {
-        ShowMenu: null,
-        ExpandMenu: false,
+    state: () => ({
+        Menu: useStorage<MenuSettings>('settings', {
+            Show: null,
+            Expand: false,
+        }),
     }),
     actions: {
         toggleMenu() {
-            this.ShowMenu = !this.ShowMenu;
+            this.Menu.Show = !this.Menu.Show;
         },
         toggleMenuSize() {
-            this.ExpandMenu = !this.ExpandMenu;
+            this.Menu.Expand = !this.Menu.Expand;
         },
     }
 });