Remove vuex

web/package.json

@@ -14,8 +14,7 @@
     "postcss": "^8.4.6",
     "tailwindcss": "^3.0.18",
     "vue": "^3.2.25",
-    "vue-router": "^4.0.12",
+    "vue-router": "^4.0.12"
-    "vuex": "^4.0.2"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^2.0.0",

web/src/@types/shims-vuex.d.ts

@@ -1,9 +0,0 @@
-import { ComponentCustomProperties } from 'vue'
-import { State } from '../store'
-import { Store } from 'vuex'
-
-declare module '@vue/runtime-core' {
-  interface ComponentCustomProperties {
-    $store: Store<State>
-  }
-}

web/src/App.vue

@@ -1,26 +1,28 @@
 <script lang="ts">
+import { mapState } from "pinia";
 import { defineComponent } from "vue";
 import { LOGOUT } from "./store/mutation-types";
-import { useBudgetsStore } from "./stores/budgets";
+import { useBudgetsStore } from "./stores/budget";
+import { useAccountStore } from "./stores/budget-account";
 import { useSessionStore } from "./stores/session";
 import { useSettingsStore } from "./stores/settings";
 
 export default defineComponent({
     computed: {
-        loggedIn() {
+        ...mapState(useBudgetsStore, ["CurrentBudgetName"]),
-            return this.$store.state.Session.Token;
+        ...mapState(useSettingsStore, ["ExpandMenu", "ShowMenu"]),
-        }
+        ...mapState(useSessionStore, ["LoggedIn"]),
     },
     methods: {
         logout() {
-            this.$store.commit(LOGOUT);
+            useSessionStore().logout();
             this.$router.push("/login")
         },
         toggleMenu() {
-            this.$store.commit("toggleMenu");
+            useSettingsStore().toggleMenu();
         },
         toggleMenuSize() {
-            this.$store.commit("toggleMenuSize");
+            useSettingsStore().toggleMenuSize();
         }
     },
     beforeCreate() {
@@ -36,12 +38,19 @@ export default defineComponent({
         sessionStore.User = restoredState.Session.User;
         sessionStore.Token = restoredState.Session.Token;
         for (const budget of restoredState.Budgets || []) {
+            console.log("UIAE", sessionStore.Budgets, budget)
             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;
@@ -55,18 +64,18 @@ export default defineComponent({
             <span class="flex-1 font-bold text-5xl -my-3 hidden md:inline" @click="toggleMenuSize">≡</span>
             <span class="flex-1 font-bold text-5xl -my-3 md:hidden" @click="toggleMenu">≡</span>
 
-            <span class="flex-1">{{ $store.getters.CurrentBudgetName }}</span>
+            <span class="flex-1">{{ CurrentBudgetName }}</span>
 
             <div class="flex flex-1 flex-row justify-end -mx-4">
-                <router-link class="mx-4" v-if="loggedIn" to="/dashboard">Dashboard</router-link>
+                <router-link class="mx-4" v-if="LoggedIn" to="/dashboard">Dashboard</router-link>
-                <router-link class="mx-4" v-if="!loggedIn" to="/login">Login</router-link>
+                <router-link class="mx-4" v-if="!LoggedIn" to="/login">Login</router-link>
-                <a class="mx-4" v-if="loggedIn" @click="logout">Logout</a>
+                <a class="mx-4" v-if="LoggedIn" @click="logout">Logout</a>
             </div>
         </div>
 
         <div class="flex flex-col md:flex-row flex-1">
             <div
-                :class="[$store.state.ExpandMenu ? 'md:w-72' : 'md:w-36', $store.state.ShowMenu ? '' : 'hidden']"
+                :class="[ExpandMenu ? 'md:w-72' : 'md:w-36', ShowMenu ? '' : 'hidden']"
                 class="md:block flex-shrink-0 w-full"
             >
                 <router-view name="sidebar"></router-view>

web/src/dialogs/NewBudget.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
 import Card from '../components/Card.vue';
 import { defineComponent } from "vue";
-import { NEW_BUDGET } from "../store/action-types";
+import { useBudgetsStore } from '../stores/budget';
 
 export default defineComponent({
   data() {
@@ -13,7 +13,7 @@ export default defineComponent({
   components: { Card },
   methods: {
     saveBudget() {
-      this.$store.dispatch(NEW_BUDGET, this.$data.budgetName);
+      useBudgetsStore().NewBudget(this.$data.budgetName);
       this.$data.dialog = false;
     },
     newBudget() {

web/src/main.ts

@@ -3,7 +3,10 @@ import App from './App.vue'
 import './index.css'
 import router from './router'
 import { createPinia } from 'pinia'
-import { SET_CURRENT_ACCOUNT, SET_CURRENT_BUDGET } from './store/action-types'
+import { useBudgetsStore } from './stores/budget';
+import { useSessionStore } from './stores/session';
+import { useSettingsStore } from './stores/settings';
+import { useAccountStore } from './stores/budget-account'
 
 const app = createApp(App)
 app.use(router)
@@ -11,10 +14,30 @@ app.use(createPinia())
 app.mount('#app')
 
 router.beforeEach(async (to, from, next) => {
-  await store.dispatch(SET_CURRENT_BUDGET, to.params.budgetid);
+  const budgetStore = useBudgetsStore();
-  await store.dispatch(SET_CURRENT_ACCOUNT, {
+  await budgetStore.SetCurrentBudget((<string>to.params.budgetid));
-        accountid: to.params.accountid,
+
-        budgetid: to.params.budgetid
+  const accountStore = useAccountStore();
-  });
+  await accountStore.SetCurrentAccount((<string>to.params.budgetid), (<string>to.params.accountid));
   next();
 })
+
+function saveStateToLocalStorage() {
+    const sessionStore = useSessionStore();
+    const budgetStore = useBudgetsStore();
+    const accountStore = useAccountStore();
+    const settingsStore = useSettingsStore();
+    let persistedState = {
+        Session: sessionStore,
+        CurrentBudgetID: budgetStore.CurrentBudgetID,
+        CurrentAccountID: accountStore.CurrentAccountID,
+        ExpandMenu: settingsStore.ExpandMenu,
+        ShowMenu: settingsStore.ShowMenu
+    }
+    localStorage.setItem('store', JSON.stringify(persistedState));
+
+}
+
+useSettingsStore().$subscribe(() => saveStateToLocalStorage);
+useBudgetsStore().$subscribe(() => saveStateToLocalStorage);
+useSessionStore().$subscribe(() => saveStateToLocalStorage);

web/src/pages/Account.vue

@@ -1,8 +1,11 @@
 <script lang="ts">
+import { mapState } from "pinia";
 import { defineComponent } from "vue"
 import Autocomplete, { Suggestion } from '../components/Autocomplete.vue'
 import Currency from "../components/Currency.vue";
 import TransactionRow from "../components/TransactionRow.vue";
+import { useAccountStore } from "../stores/budget-account";
+import { useSessionStore } from "../stores/session";
 
 export default defineComponent({
     data() {
@@ -16,6 +19,9 @@ export default defineComponent({
     },
     components: { Autocomplete, Currency, TransactionRow },
     props: ["budgetid", "accountid"],
+    computed: {
+        ...mapState(useAccountStore, ["CurrentAccount", "TransactionsList"]),
+    },
     methods: {
         saveTransaction(e : MouseEvent) {
             e.preventDefault();
@@ -31,7 +37,7 @@ export default defineComponent({
                     amount: this.$data.Amount,
                     state: "Uncleared"
                 }),
-                headers: this.$store.getters.AuthHeaders,
+                headers: useSessionStore().AuthHeaders,
             })
                 .then(x => x.json());
         },
@@ -40,10 +46,10 @@ export default defineComponent({
 </script>
 
 <template>
-        <h1>{{ $store.getters.CurrentAccount.Name }}</h1>
+        <h1>{{ CurrentAccount?.Name }}</h1>
         <p>
             Current Balance:
-            <Currency :value="$store.getters.CurrentAccount.Balance" />
+            <Currency :value="CurrentAccount?.Balance" />
         </p>
         <table>
             <tr class="font-bold">
@@ -76,7 +82,7 @@ export default defineComponent({
                 </td>
                 <td style="width: 20px;"></td>
             </tr>
-            <TransactionRow v-for="(transaction, index) in $store.getters.Transactions"
+            <TransactionRow v-for="(transaction, index) in TransactionsList"
                 :transaction="transaction"
                 :index="index" />
         </table>

web/src/pages/BudgetSidebar.vue

@@ -1,10 +1,19 @@
 <script lang="ts">
+import { mapState } from "pinia"
 import { defineComponent } from "vue"
 import Currency from "../components/Currency.vue"
+import { useBudgetsStore } from "../stores/budget"
+import { useAccountStore } from "../stores/budget-account"
+import { useSettingsStore } from "../stores/settings"
 
 export default defineComponent({
     props: ["budgetid", "accountid"],
-    components: { Currency }
+    components: { Currency },
+    computed: {
+      ...mapState(useSettingsStore, ["ExpandMenu"]),
+      ...mapState(useBudgetsStore, ["CurrentBudgetName", "CurrentBudgetID"]),
+      ...mapState(useAccountStore, ["OnBudgetAccounts", "OnBudgetAccountsBalance", "OffBudgetAccounts", "OffBudgetAccountsBalance"])
+    }
 })
 </script>
 
@@ -12,44 +21,44 @@ export default defineComponent({
   <div class="flex flex-col">
     <span class="m-1 p-1 px-3 text-xl">
       <router-link to="/dashboard">⌂</router-link>
-      {{$store.getters.CurrentBudgetName}}
+      {{CurrentBudgetName}}
     </span>
     <span class="bg-orange-200 rounded-lg m-1 p-1 px-3 flex flex-col">
       <router-link :to="'/budget/'+budgetid+'/budgeting'">Budget</router-link><br />
-      <!--<router-link :to="'/budget/'+$store.getters.CurrentBudgetID+'/reports'">Reports</router-link>-->
+      <!--<router-link :to="'/budget/'+CurrentBudgetID+'/reports'">Reports</router-link>-->
-      <!--<router-link :to="'/budget/'+$store.getters.CurrentBudgetID+'/all-accounts'">All Accounts</router-link>-->
+      <!--<router-link :to="'/budget/'+CurrentBudgetID+'/all-accounts'">All Accounts</router-link>-->
     </span>
     <li class="bg-orange-200 rounded-lg m-1 p-1 px-3">
       <div class="flex flex-row justify-between font-bold">
         <span>On-Budget Accounts</span>
-        <Currency :class="$store.state.ExpandMenu?'md:inline':'md:hidden'" :value="$store.getters.OnBudgetAccountsBalance" />
+        <Currency :class="ExpandMenu?'md:inline':'md:hidden'" :value="OnBudgetAccountsBalance" />
       </div>
-      <div v-for="account in $store.getters.OnBudgetAccounts" class="flex flex-row justify-between">
+      <div v-for="account in OnBudgetAccounts" class="flex flex-row justify-between">
         <router-link :to="'/budget/'+budgetid+'/account/'+account.ID">{{account.Name}}</router-link>
-        <Currency :class="$store.state.ExpandMenu?'md:inline':'md:hidden'" :value="account.Balance" />
+        <Currency :class="ExpandMenu?'md:inline':'md:hidden'" :value="account.Balance" />
       </div>
     </li>
     <li class="bg-red-200 rounded-lg m-1 p-1 px-3">
       <div class="flex flex-row justify-between font-bold">
         <span>Off-Budget Accounts</span>
-        <Currency :class="$store.state.ExpandMenu?'md:inline':'md:hidden'" :value="$store.getters.OffBudgetAccountsBalance" />
+        <Currency :class="ExpandMenu?'md:inline':'md:hidden'" :value="OffBudgetAccountsBalance" />
       </div>
-      <div v-for="account in $store.getters.OffBudgetAccounts" class="flex flex-row justify-between">
+      <div v-for="account in OffBudgetAccounts" class="flex flex-row justify-between">
         <router-link :to="'/budget/'+budgetid+'/account/'+account.ID">{{account.Name}}</router-link>
-        <Currency :class="$store.state.ExpandMenu?'md:inline':'md:hidden'" :value="account.Balance" />
+        <Currency :class="ExpandMenu?'md:inline':'md:hidden'" :value="account.Balance" />
       </div>
     </li>
     <li class="bg-red-200 rounded-lg m-1 p-1 px-3">
       Closed Accounts
     </li>
     <!--<li>
-      <router-link :to="'/budget/'+$store.getters.CurrentBudgetID+'/accounts'">Edit accounts</router-link>
+      <router-link :to="'/budget/'+CurrentBudgetID+'/accounts'">Edit accounts</router-link>
     </li>-->
     <li class="bg-red-200 rounded-lg m-1 p-1 px-3">
       + Add Account
     </li>
     <li class="bg-red-200 rounded-lg m-1 p-1 px-3">
-      <router-link :to="'/budget/'+$store.getters.CurrentBudgetID+'/settings'">Budget-Settings</router-link>
+      <router-link :to="'/budget/'+CurrentBudgetID+'/settings'">Budget-Settings</router-link>
     </li>
     <!--<li><router-link to="/admin">Admin</router-link></li>-->
   </div>        

web/src/pages/Budgeting.vue

@@ -1,51 +1,53 @@
 <script lang="ts">
+import { mapState } from "pinia";
 import { defineComponent } from "vue";
-import { FETCH_MONTH_BUDGET } from "../store/action-types";
-import { TITLE } from "../store/mutation-types";
 import Currency from "../components/Currency.vue";
+import { useBudgetsStore } from "../stores/budget";
+import { Category, useAccountStore } from "../stores/budget-account";
 
 interface Date {
-    Year:Number, 
+    Year: Number,
-    Month:Number,
+    Month: Number,
 }
 
 export default defineComponent({
     mounted() {
-        this.$store.commit(TITLE, "Budget for " + this.month + " " + this.year);
+        document.title = "Budgeteer - Budget for " + this.month + " " + this.year;
-        return this.$store.dispatch(FETCH_MONTH_BUDGET, { budgetid: this.budgetid, year: this.year, month: this.month });
+        return useAccountStore().FetchMonthBudget(this.budgetid, this.year, this.month);
     },
     watch: {
         year() {
-            return this.$store.dispatch(FETCH_MONTH_BUDGET, { budgetid: this.budgetid, year: this.year, month: this.month });
+            return useAccountStore().FetchMonthBudget(this.budgetid, this.year, this.month);
         },
         month() {
-            return this.$store.dispatch(FETCH_MONTH_BUDGET, { budgetid: this.budgetid, year: this.year, month: this.month });
+            return useAccountStore().FetchMonthBudget(this.budgetid, this.year, this.month);
         },
     },
     props: ["budgetid", "year", "month"],
     computed: {
-        Categories() {
+        ...mapState(useBudgetsStore, ["CurrentBudgetID"]),
-            return this.$store.getters.Categories(this.year, this.month);
+        Categories() : IterableIterator<Category> | undefined {
+            return useAccountStore().Categories(this.year, this.month);
         },
-        previous() : Date {
+        previous(): Date {
             return {
                 Year: new Date(this.year, this.month - 1, 1).getFullYear(),
                 Month: new Date(this.year, this.month - 1, 1).getMonth(),
             };
         },
-        current() : Date {
+        current(): Date {
             return {
                 Year: new Date().getFullYear(),
                 Month: new Date().getMonth(),
             };
         },
-        selected() : Date {
+        selected(): Date {
             return {
                 Year: this.year,
                 Month: Number(this.month) + 1
             }
         },
-        next() : Date {
+        next(): Date {
             return {
                 Year: new Date(this.year, Number(this.month) + 1, 1).getFullYear(),
                 Month: new Date(this.year, Number(this.month) + 1, 1).getMonth(),
@@ -61,13 +63,17 @@ export default defineComponent({
 </script>
 
 <template>
-    <h1>
+    <h1>Budget for {{ selected.Month }}/{{ selected.Year }}</h1>
-        Budget for {{selected.Month}}/{{selected.Year}}
-    </h1>
     <div>
-        <router-link :to="'/budget/'+$store.getters.CurrentBudget.ID +'/budgeting/' + previous.Year + '/' + previous.Month">Previous Month</router-link> - 
+        <router-link
-        <router-link :to="'/budget/'+$store.getters.CurrentBudget.ID +'/budgeting/' + current.Year + '/' + current.Month">Current Month</router-link> - 
+            :to="'/budget/' + CurrentBudgetID + '/budgeting/' + previous.Year + '/' + previous.Month"
-        <router-link :to="'/budget/'+$store.getters.CurrentBudget.ID +'/budgeting/' + next.Year + '/' + next.Month">Next Month</router-link>
+        >Previous Month</router-link>-
+        <router-link
+            :to="'/budget/' + CurrentBudgetID + '/budgeting/' + current.Year + '/' + current.Month"
+        >Current Month</router-link>-
+        <router-link
+            :to="'/budget/' + CurrentBudgetID + '/budgeting/' + next.Year + '/' + next.Month"
+        >Next Month</router-link>
     </div>
     <table class="container col-lg-12" id="content">
         <tr>
@@ -81,14 +87,22 @@ export default defineComponent({
             <th>Available</th>
         </tr>
         <tr v-for="category in Categories">
-            <td>{{category.Group}}</td>
+            <td>{{ category.Group }}</td>
-            <td>{{category.Name}}</td>
+            <td>{{ category.Name }}</td>
             <td></td>
             <td></td>
-            <td class="text-right"><Currency :value="category.AvailableLastMonth" /></td>
+            <td class="text-right">
-            <td class="text-right"><Currency :value="category.Assigned" /></td>
+                <Currency :value="category.AvailableLastMonth" />
-            <td class="text-right"><Currency :value="category.Activity" /></td>
+            </td>
-            <td class="text-right"><Currency :value="category.Available" /></td>
+            <td class="text-right">
+                <Currency :value="category.Assigned" />
+            </td>
+            <td class="text-right">
+                <Currency :value="category.Activity" />
+            </td>
+            <td class="text-right">
+                <Currency :value="category.Available" />
+            </td>
         </tr>
     </table>
 </template>

web/src/pages/Dashboard.vue

@@ -2,17 +2,22 @@
 import NewBudget from '../dialogs/NewBudget.vue';
 import Card from '../components/Card.vue';
 import { defineComponent } from 'vue';
+import { mapState } from 'pinia';
+import { useSessionStore } from '../stores/session';
 
 export default defineComponent({
     props: ["budgetid"],
-    components: { NewBudget, Card }
+    components: { NewBudget, Card },
+    computed: {
+        ...mapState(useSessionStore, ["BudgetsList"]),
+    }
 })
 </script>
 
 <template>
     <h1>Budgets</h1>
     <div class="grid md:grid-cols-2 gap-6">
-        <Card v-for="budget in $store.getters.Budgets">
+        <Card v-for="budget in BudgetsList">
             <router-link v-bind:to="'/budget/'+budget.ID+'/budgeting'" class="contents">
             <!--<svg class="w-24"></svg>-->
                 <p class="w-24 text-center text-6xl"></p>

web/src/pages/Login.vue

@@ -1,7 +1,6 @@
 <script lang="ts">
-import { TITLE } from "../store/mutation-types";
-import { LOGIN } from '../store/action-types'
 import { defineComponent } from "vue";
+import { useSessionStore } from "../stores/session";
 
 export default defineComponent({
     data() {
@@ -15,12 +14,12 @@ export default defineComponent({
         }
     },
     mounted() {
-        this.$store.commit(TITLE, "Login");
+        document.title = "Budgeteer - Login";
     },
     methods: {
         formSubmit(e : MouseEvent) {
             e.preventDefault();
-            this.$store.dispatch(LOGIN, this.$data.login)
+            useSessionStore().login(this.$data.login)
                 .then(x => {
                     this.$data.error = "";
                     this.$router.replace("/dashboard");

web/src/pages/Register.vue

@@ -1,6 +1,6 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { REGISTER } from "../store/action-types";
+import { useSessionStore } from '../stores/session';
 
 export default defineComponent({
     data() {
@@ -15,11 +15,11 @@ export default defineComponent({
         }
     },
     methods: {
-        formSubmit (e) {
+        formSubmit (e : FormDataEvent) {
             e.preventDefault();
-            this.$store.dispatch(REGISTER, this.$data.login)
+            useSessionStore().register(this.$data.login)
                 .then(() => this.$data.error = "")
-                .catch(() => this.$data.error = ["Something went wrong!"]);
+                .catch(() => this.$data.error = "Something went wrong!");
 
             // TODO display invalidCredentials
             // TODO redirect to dashboard on success

web/src/pages/Settings.vue

@@ -1,7 +1,8 @@
 <script lang="ts">
 import { defineComponent } from "vue"
-import { IMPORT_YNAB } from "../store/action-types";
+import { useAPI } from "../stores/api";
-import { TITLE } from "../store/mutation-types"
+import { useBudgetsStore } from "../stores/budget";
+import { useSessionStore } from "../stores/session";
 
 export default defineComponent({
     data() {
@@ -16,7 +17,7 @@ export default defineComponent({
         }
     },
     mounted() {
-        this.$store.commit(TITLE, "Settings")
+        document.title = "Budgeteer - Settings";
     },
     methods: {
         gotAssignments(e : Event) {
@@ -30,22 +31,21 @@ export default defineComponent({
                 this.$data.transactionsFile = input.files[0];
         },
         deleteBudget() {
-            fetch("/api/v1/budget/" + this.$store.getters.CurrentBudget.ID, {
+            const currentBudgetID = useBudgetsStore().CurrentBudgetID;
-                method: "DELETE",
+            if (currentBudgetID == null)
-                headers: {
+                return;
-                    'Authorization': 'Bearer ' + this.$store.state.Session.Token
+
-                },
+            const api = useAPI();
-            });
+            api.DELETE("/api/v1/budget/" + currentBudgetID);
-            this.$store.commit("deleteBudget", this.$store.getters.CurrentBudget.ID)
+
+            const budgetStore = useSessionStore();
+            budgetStore.Budgets.delete(currentBudgetID);
             this.$router.push("/")
         },
         clearBudget() {
-            fetch("/api/v1/budget/" + this.$store.getters.CurrentBudget.ID + "/settings/clear", {
+            const currentBudgetID = useBudgetsStore().CurrentBudgetID;
-                method: "POST",
+            const api = useAPI();
-                headers: {
+            api.POST("/api/v1/budget/" + currentBudgetID + "/settings/clear", null)
-                    'Authorization': 'Bearer ' + this.$store.state.Session.Token
-                },
-            })
         },
         cleanNegative() {
             // <a href="/budget/{{.Budget.ID}}/settings/clean-negative">Fix all historic negative category-balances</a>
@@ -57,7 +57,8 @@ export default defineComponent({
             let formData = new FormData();
             formData.append("transactions", this.$data.transactionsFile);
             formData.append("assignments", this.$data.assignmentsFile);
-            this.$store.dispatch(IMPORT_YNAB, formData);
+            const budgetStore = useBudgetsStore();
+            budgetStore.ImportYNAB(formData);
         }
     }
 })

web/src/store/action-types.ts

@@ -1,11 +0,0 @@
-export const IMPORT_YNAB = "YNAB import";
-export const GET = "GET";
-export const POST = "POST";
-export const NEW_BUDGET = "New budget";
-export const SET_CURRENT_BUDGET = "Set current budget";
-export const SET_CURRENT_ACCOUNT = "Set current account";
-export const FETCH_BUDGET = "Fetch budget";
-export const FETCH_MONTH_BUDGET = "Fetch budget for month";
-export const LOGIN = 'Log in';
-export const REGISTER = 'Register';
-export const FETCH_ACCOUNT = "Fetch account";

web/src/store/budget/index.ts

@@ -1,152 +0,0 @@
-import { Module } from "vuex";
-import { FETCH_ACCOUNT, FETCH_BUDGET, FETCH_MONTH_BUDGET, SET_CURRENT_ACCOUNT } from "../action-types";
-import { LOGOUT, TITLE } from "../mutation-types";
-
-export interface BudgetState {
-    Accounts: Map<string, Account>,
-    CurrentAccountID?: string,
-    Categories: Map<string, Category>,
-    Months: Map<number, Map<number, Map<string, Category>>>,
-    Transactions: [],
-    Assignments: []
-}
-
-export interface Account {
-    ID: string
-    OnBudget: boolean
-}
-
-export interface Category {
-    Group: string
-    Name: string
-    AvailableLastMonth: number
-    Assigned: number
-    Activity: number
-    Available: number
-}
-
-export const budgetStore : Module<BudgetState, any> = {
-    state: {
-        Accounts: new Map<string, Account>(),
-        CurrentAccountID: undefined,
-        Months: new Map<number, Map<number, Map<string, Category>>>(),
-        Categories: new Map<string, Category>(),
-        Transactions: [],
-        Assignments: []
-    },
-
-    mutations: {
-        initializeStore(state) {
-            const store = localStorage.getItem("store");
-            if (!store)
-                return;
-
-            const restoredState = JSON.parse(store);
-            if (!restoredState)
-                return;
-
-            state.CurrentAccountID = restoredState.CurrentAccountID;
-
-            for (const account of restoredState.Accounts || []) {
-                state.Accounts.set(account[0], account[1]);
-            }
-        },
-        [LOGOUT](state) {
-            state.Accounts.clear();
-            state.Categories.clear();
-            state.Transactions = [];
-            state.Assignments = [];
-        },
-        addAccount(state, account) {
-            state.Accounts.set(account.ID, account);
-        },
-        addCategory(state, category) {
-            state.Categories.set(category.ID, category);
-        },
-        addCategoriesForMonth(state, {year, month, categories}) {
-            const yearMap = state.Months.get(year) || new Map<number, Map<string, Category>>();
-            state.Months.set(year, yearMap);
-
-            const monthMap = yearMap.get(month) || new Map<string, Category>();
-            yearMap.set(month, monthMap);
-
-            for (const category of categories){
-                monthMap.set(category.ID, category);
-            }
-        },
-        setCurrentAccountID(state, accountid) {
-            state.CurrentAccountID = accountid;
-        },
-        setTransactions(state, transactions) {
-            state.Transactions = transactions;
-        }
-    },
-
-    getters: {
-        Accounts(state) {
-            return state.Accounts.values();
-        },
-        Categories: (state) => (year : number, month : number) => {
-            const yearMap = state.Months.get(year);
-            return yearMap?.get(month)?.values();
-        },
-        CurrentAccount(state) : Account | undefined {
-            if (state.CurrentAccountID == null)
-                return undefined;
-            return state.Accounts.get(state.CurrentAccountID);
-        },
-        OnBudgetAccounts(state) {
-            return Array.from(state.Accounts.values()).filter(x => x.OnBudget);
-        },
-        OnBudgetAccountsBalance(state, getters){
-            return getters.OnBudgetAccounts.reduce((prev, curr) => prev + Number(curr.Balance), 0);
-        },
-        OffBudgetAccounts(state) {
-            return Array.from(state.Accounts.values()).filter(x => !x.OnBudget);
-        },
-        OffBudgetAccountsBalance(state, getters){
-            return getters.OffBudgetAccounts.reduce((prev, curr) => prev + Number(curr.Balance), 0);
-        },
-        Transactions(state) {
-            return (state.Transactions || []);
-        }
-    },
-
-    actions: {
-        async [SET_CURRENT_ACCOUNT]({ state, commit, dispatch, getters }, { budgetid, accountid }) {
-            if (budgetid == null)
-                return
-
-            commit("setCurrentAccountID", accountid);
-            if (accountid == null)
-                return
-
-            commit(TITLE, getters.CurrentAccount.Name);
-            await dispatch(FETCH_ACCOUNT, accountid)
-        },
-        async [FETCH_ACCOUNT]({ state, commit, rootState }, accountid) {
-            const result = await fetch("/api/v1/account/" + accountid + "/transactions", {
-                headers: {
-                    'Authorization': 'Bearer ' + rootState.Session.Token
-                }
-            });
-            const response = await result.json();
-            commit("setTransactions", response.Transactions);
-        },
-        async [FETCH_BUDGET]({ state, commit, dispatch, rootState }, budgetid) {
-            const result = await dispatch("GET", { path: "/budget/" + budgetid });
-            const response = await result.json();
-            for (const account of response.Accounts || []) {
-                commit("addAccount", account);
-            }
-            for (const category of response.Categories || []) {
-                commit("addCategory", category);
-            }
-        },
-        async [FETCH_MONTH_BUDGET]({state, commit, dispatch, rootState }, {budgetid, month, year}) {
-            const result = await dispatch("GET", { path: "/budget/" + budgetid + "/" + year + "/" + month});
-            const response = await result.json();
-            commit("addCategoriesForMonth", {year, month, categories: response.Categories})
-        }
-    }
-}

web/src/store/index.ts

@@ -1,31 +0,0 @@
-export const store = createStore<State>({
-    actions: {
-        /*async fetchDashboard ({state, commit, rootState}) {
-            const response = await fetch("/api/v1/dashboard", {
-                headers: {
-                    'Authorization': 'Bearer ' + rootState.Session.Token
-                }
-            })
-            const data = await response.json();
-            commit("setBudgets", data.Budgets);
-        },*/
-    },
-    plugins: [createLogger()],
-    modules: {
-        budget: budgetStore
-    }
-})
-
-store.subscribe((mutation, state) => {
-
-    const sessionStore = useSessionStore();
-    let persistedState = {
-        Session: sessionStore,
-//        Accounts: [...state.Accounts],
-        CurrentBudgetID: state.CurrentBudgetID,
-        //CurrentAccountID: state.CurrentAccountID,
-        ExpandMenu: state.ExpandMenu,
-        ShowMenu: state.ShowMenu
-    }
-    localStorage.setItem("store", JSON.stringify(persistedState));
-})

web/src/store/mutation-types.ts

@@ -1,3 +0,0 @@
-export const LOGIN_SUCCESS = '✔ Logged in';
-export const LOGOUT = 'Log out';
-export const TITLE = 'Update title';

web/src/stores/api.ts

@@ -0,0 +1,28 @@
+import { defineStore } from "pinia";
+import { useSessionStore } from "./session";
+
+export const useAPI = defineStore("api", {
+    actions: {
+        GET(path : string) {
+            const sessionStore = useSessionStore();
+            return fetch("/api/v1" + path, {
+                headers: sessionStore.AuthHeaders,
+            })
+        },
+        POST(path : string, body : FormData | string | null) {
+            const sessionStore = useSessionStore();
+            return fetch("/api/v1" + path, {
+                method: "POST",
+                headers: sessionStore.AuthHeaders,
+                body: body,
+            })
+        },
+        DELETE(path : string) {
+            const sessionStore = useSessionStore();
+            return fetch("/api/v1" + path, {
+                method: "DELETE",
+                headers: sessionStore.AuthHeaders,
+            })
+        },
+    }
+});

web/src/stores/budget-account.ts

@@ -0,0 +1,111 @@
+import { defineStore } from "pinia"
+import { FETCH_ACCOUNT } from "../store/action-types";
+import { useAPI } from "./api";
+import { useSessionStore } from "./session";
+
+interface State {
+    Accounts: Map<string, Account>,
+    CurrentAccountID: string | null,
+    Categories: Map<string, Category>,
+    Months: Map<number, Map<number, Map<string, Category>>>,
+    Transactions: [],
+    Assignments: []
+}
+
+export interface Account {
+    ID: string
+    Name: string
+    OnBudget: boolean
+    Balance: Number
+}
+
+export interface Category {
+    ID: string
+    Group: string
+    Name: string
+    AvailableLastMonth: number
+    Assigned: number
+    Activity: number
+    Available: number
+}
+
+export const useAccountStore = defineStore("budget/account", {
+    state: (): State => ({
+        Accounts: new Map<string, Account>(),
+        CurrentAccountID: null,
+        Months: new Map<number, Map<number, Map<string, Category>>>(),
+        Categories: new Map<string, Category>(),
+        Transactions: [],
+        Assignments: []
+    }),
+    getters: {
+        AccountsList(state) {
+            return state.Accounts.values();
+        },
+        Categories: (state) => (year : number, month : number) => {
+            const yearMap = state.Months.get(year);
+            return yearMap?.get(month)?.values();
+        },
+        CurrentAccount(state) : Account | undefined {
+            if (state.CurrentAccountID == null)
+                return undefined;
+
+            return state.Accounts.get(state.CurrentAccountID);
+        },
+        OnBudgetAccounts(state) {
+            return Array.from(state.Accounts.values()).filter(x => x.OnBudget);
+        },
+        OnBudgetAccountsBalance(state) : Number {
+            return this.OnBudgetAccounts.reduce((prev, curr) => prev + Number(curr.Balance), 0);
+        },
+        OffBudgetAccounts(state) {
+            return Array.from(state.Accounts.values()).filter(x => !x.OnBudget);
+        },
+        OffBudgetAccountsBalance(state) : Number {
+            return this.OffBudgetAccounts.reduce((prev, curr) => prev + Number(curr.Balance), 0);
+        },
+        Transactions(state) {
+            return (state.Transactions || []);
+        }
+    },
+    actions: {
+        async SetCurrentAccount(budgetid : string, accountid : string) {
+            if (budgetid == null)
+                return
+
+            this.CurrentAccountID = accountid;
+            if (this.CurrentAccount == undefined)
+                return
+
+            useSessionStore().setTitle(this.CurrentAccount.Name);
+            await this.FetchAccount(accountid);
+        },
+        async FetchAccount(accountid : string) {
+            const api = useAPI();
+            const result = await api.GET("/api/v1/account/" + accountid + "/transactions");
+            const response = await result.json();
+            this.Transactions = response.Transactions;
+        },
+        async FetchMonthBudget(budgetid : string, month : number, year : number) {
+            const api = useAPI();
+            const result = await api.GET("/budget/" + budgetid + "/" + year + "/" + month);
+            const response = await result.json();
+            this.addCategoriesForMonth(year, month, response.Categories);
+        },
+        addCategoriesForMonth(year : number, month : number, categories : Category[]) : void {
+            const yearMap = this.Months.get(year) || new Map<number, Map<string, Category>>();
+            this.Months.set(year, yearMap);
+
+            const monthMap = yearMap.get(month) || new Map<string, Category>();
+            yearMap.set(month, monthMap);
+
+            for (const category of categories){
+                monthMap.set(category.ID, category);
+            }
+        },
+        logout() {
+            this.$reset()
+        },
+    }
+
+})

web/src/stores/budget.ts

@@ -1,5 +1,6 @@
 import { defineStore } from "pinia";
 import { useAPI } from "./api";
+import { useAccountStore } from "./budget-account";
 import { Budget, useSessionStore } from "./session";
 
 interface State {
@@ -8,35 +9,29 @@ interface State {
 
 export const useBudgetsStore = defineStore('budget', {
     state: (): State => ({
-        CurrentBudgetID: null  
+        CurrentBudgetID: null,
     }),
-    actions: {
-        setCurrentBudgetID(budgetid : string) {
-            this.CurrentBudgetID = budgetid;
-        },
-    },
     getters: {
-        CurrentBudget() : Budget | undefined {
+        CurrentBudget(): Budget | undefined {
             if (this.CurrentBudgetID == null)
                 return undefined;
 
             const sessionStore = useSessionStore();
             return sessionStore.Budgets.get(this.CurrentBudgetID);
         },
-        CurrentBudgetName() : string {
+        CurrentBudgetName(state): string {
             return this.CurrentBudget?.Name ?? "";
         },
-        CurrentBudgetID() : string | undefined {
+    },
-            return this.CurrentBudgetID;
+    actions: {
-        },
+        ImportYNAB(formData: FormData) {
-        ImportYNAB(formData) {
             const api = useAPI();
             return api.POST(
                 "/budget/" + this.CurrentBudgetID + "/import/ynab",
-                formData
+                formData,
             );
         },
-        async NewBudget(budgetName) {
+        async NewBudget(budgetName: string): Promise<void> {
             const api = useAPI();
             const result = await api.POST(
                 "/budget/new",
@@ -47,13 +42,24 @@ export const useBudgetsStore = defineStore('budget', {
             const sessionStore = useSessionStore();
             sessionStore.Budgets.set(response.ID, response);
         },
-        async SetCurrentBudget(budgetid : string) {
+        async SetCurrentBudget(budgetid: string): Promise<void> {
             this.CurrentBudgetID = budgetid;
 
             if (budgetid == null)
                 return
 
-            await dispatch(FETCH_BUDGET, budgetid)
+            await this.FetchBudget(budgetid);
+        },
+        async FetchBudget(budgetid: string) {
+            const api = useAPI();
+            const result = await api.GET("/budget/" + budgetid);
+            const response = await result.json();
+            for (const account of response.Accounts || []) {
+                useAccountStore().Accounts.set(account.ID, account);
+            }
+            for (const category of response.Categories || []) {
+                useAccountStore().Categories.set(category.ID, category);
+            }
         },
     }
 })

web/src/stores/session.ts

@@ -20,35 +20,9 @@ export const useSessionStore = defineStore('session', {
         Budgets: new Map<string, Budget>(),
     }),
     getters: {
-        Budgets(): IterableIterator<Budget> {
+        BudgetsList: (state) => state.Budgets.values(),
-            return this.Budgets.values();
+        AuthHeaders: (state) => ({'Authorization': 'Bearer ' + state.Token}),
-        },
+        LoggedIn: (state) => state.Token != null,
-        AuthHeaders(): HeadersInit {
-            return {
-                'Authorization': 'Bearer ' + this.Token
-            }
-        },
-        /*// 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: {
         setTitle(title : string) {

web/yarn.lock

@@ -1583,7 +1583,7 @@
   optionalDependencies:
     prettier "^1.18.2 || ^2.0.0"
 
-"@vue/devtools-api@^6.0.0-beta.11", "@vue/devtools-api@^6.0.0-beta.18":
+"@vue/devtools-api@^6.0.0-beta.18":
   version "6.0.0-beta.21.1"
   resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.0.0-beta.21.1.tgz#f1410f53c42aa67fa3b01ca7bdba891f69d7bc97"
   integrity sha512-FqC4s3pm35qGVeXRGOjTsRzlkJjrBLriDS9YXbflHLsfA9FrcKzIyWnLXoNm+/7930E8rRakXuAc2QkC50swAw==
@@ -8230,13 +8230,6 @@ vue@^3.2.25:
     "@vue/server-renderer" "3.2.29"
     "@vue/shared" "3.2.29"
 
-vuex@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/vuex/-/vuex-4.0.2.tgz#f896dbd5bf2a0e963f00c67e9b610de749ccacc9"
-  integrity sha512-M6r8uxELjZIK8kTKDGgZTYX/ahzblnzC4isU1tpmEuOIIKmV+TRdc+H4s8ds2NuZ7wpUTdGRzJRtoj+lI+pc0Q==
-  dependencies:
-    "@vue/devtools-api" "^6.0.0-beta.11"
-
 watchpack-chokidar2@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/watchpack-chokidar2/-/watchpack-chokidar2-2.0.1.tgz#38500072ee6ece66f3769936950ea1771be1c957"