Use vueuse useStorage instead of manually using localStorage

web/package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "@mdi/font": "5.9.55",
+    "@vueuse/core": "^7.6.1",
     "autoprefixer": "^10.4.2",
     "pinia": "^2.0.11",
     "postcss": "^8.4.6",

web/src/App.vue

@@ -2,7 +2,6 @@
 import { mapState } from "pinia";
 import { defineComponent } from "vue";
 import { useBudgetsStore } from "./stores/budget";
-import { useAccountStore } from "./stores/budget-account";
 import { useSessionStore } from "./stores/session";
 import { useSettingsStore } from "./stores/settings";
 
@@ -15,7 +14,7 @@ export default defineComponent({
     methods: {
         logout() {
             useSessionStore().logout();
-            this.$router.push("/login")
+            this.$router.push("/login");
         },
         toggleMenu() {
             useSettingsStore().toggleMenu();
@@ -24,40 +23,6 @@ export default defineComponent({
             useSettingsStore().toggleMenuSize();
         }
     },
-    beforeCreate() {
-        useSessionStore().restoreFromLocalStorage();
-        
-        
-        /*
-        const store = localStorage.getItem("session");
-        if (!store)
-            return;
-
-        const restoredState = JSON.parse(store);
-        if (!restoredState)
-            return;
-
-console.log("session", restoredState)
-        const sessionStore = useSessionStore();
-        sessionStore.User = restoredState.Session.User;
-        sessionStore.Token = restoredState.Session.Token;
-        for (const budget of restoredState.Budgets || []) {
-            sessionStore.Budgets.set(budget[0], budget[1]);
-        }
-
-        const budgetsStore = useBudgetsStore();
-        budgetsStore.CurrentBudgetID = restoredState.CurrentBudgetID;
-
-        const accountStore = useAccountStore();
-        accountStore.CurrentAccountID = restoredState.CurrentAccountID;
-        for (const account of restoredState.Accounts || []) {
-            accountStore.Accounts.set(account[0], account[1]);
-        }
-
-        const settingsStore = useSettingsStore();
-        settingsStore.ShowMenu = restoredState.ShowMenu;
-        settingsStore.ExpandMenu = restoredState.ExpandMenu;*/
-    }
 })
 </script>
 

web/src/main.ts

@@ -4,8 +4,6 @@ import './index.css'
 import router from './router'
 import { createPinia, SubscriptionCallbackMutation } from 'pinia'
 import { useBudgetsStore } from './stores/budget';
-import { useSessionStore } from './stores/session';
-import { useSettingsStore } from './stores/settings';
 import { useAccountStore } from './stores/budget-account'
 import PiniaLogger from './pinia-logger'
 
@@ -25,12 +23,3 @@ router.beforeEach(async (to, from, next) => {
   await accountStore.SetCurrentAccount((<string>to.params.budgetid), (<string>to.params.accountid));
   next();
 })
-
-function saveStateToLocalStorage(mutation : SubscriptionCallbackMutation<any>, state : any) {
-  localStorage.setItem(mutation.storeId, JSON.stringify(state));
-  console.log("saving to local storage", mutation)
-}
-
-useSettingsStore().$subscribe(saveStateToLocalStorage);
-useBudgetsStore().$subscribe(saveStateToLocalStorage);
-useSessionStore().$subscribe(saveStateToLocalStorage);

web/src/stores/budget.ts

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

web/src/stores/session.ts

@@ -1,3 +1,4 @@
+import { useStorage } from '@vueuse/core';
 import { defineStore } from 'pinia'
 import { useAPI } from './api';
 
@@ -14,8 +15,7 @@ export interface Budget {
 }
 
 export const useSessionStore = defineStore('session', {
-    // convert to a function
+    state: () => useStorage<State>('session', {
-    state: (): State => ({
         Token: null,
         User: null,
         Budgets: new Map<string, Budget>(),
@@ -49,10 +49,5 @@ export const useSessionStore = defineStore('session', {
         logout() {
             this.$reset()
         },
-        restoreFromLocalStorage() {
-            const json = localStorage.getItem("session");
-            const value = JSON.parse(json || "{}");
-            Object.assign(this, value);
-        }
     }
 })

web/src/stores/settings.ts

@@ -1,13 +1,14 @@
+import { useStorage } from "@vueuse/core";
 import { defineStore } from "pinia";
 
 interface State {
-    ShowMenu?: boolean,
+    ShowMenu: boolean | null,
-    ExpandMenu?: boolean,
+    ExpandMenu: boolean,
 }
 
 export const useSettingsStore = defineStore('settings', {
-    state: (): State => ({
+    state: () => useStorage<State>('settings', {
-        ShowMenu: undefined,
+        ShowMenu: null,
         ExpandMenu: false,
     }),
     actions: {

web/yarn.lock

@@ -1657,6 +1657,21 @@
   resolved "https://registry.yarnpkg.com/@vue/web-component-wrapper/-/web-component-wrapper-1.3.0.tgz#b6b40a7625429d2bd7c2281ddba601ed05dc7f1a"
   integrity sha512-Iu8Tbg3f+emIIMmI2ycSI8QcEuAUgPTgHwesDU1eKMLE4YC/c/sFbGc70QgMq31ijRftV0R7vCm9co6rldCeOA==
 
+"@vueuse/core@^7.6.1":
+  version "7.6.1"
+  resolved "https://registry.yarnpkg.com/@vueuse/core/-/core-7.6.1.tgz#6919dc0c9289a77f00bfa3403f861f7e4c7adc89"
+  integrity sha512-492y7R9HRu6TXzcGBMVG5qg5o9CHjrWLfOHh+TEknJeLe3LIYHsIBi1IlUN5s/yP3OHlBynjrzMMUm4gEyBmQg==
+  dependencies:
+    "@vueuse/shared" "7.6.1"
+    vue-demi "*"
+
+"@vueuse/shared@7.6.1":
+  version "7.6.1"
+  resolved "https://registry.yarnpkg.com/@vueuse/shared/-/shared-7.6.1.tgz#48db62a4ad160838353ae78d0dcbfc7c9c94c89c"
+  integrity sha512-VhURBjuyELYLW94TLqwyM+tUZ0uyWAOjp8zDnJts5wwyHZlGt/yabLbuEl70cKmt0zR9psVyAyHC+LTgRrA1Zw==
+  dependencies:
+    vue-demi "*"
+
 "@webassemblyjs/ast@1.11.1":
   version "1.11.1"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.11.1.tgz#2bfd767eae1a6996f432ff7e8d7fc75679c0b6a7"