Do not use a store for API

web/src/api.ts

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

web/src/components/Autocomplete.vue

@@ -1,6 +1,6 @@
 <script lang="ts">
 import { defineComponent, PropType } from "vue"
-import { useAPI } from "../stores/api";
+import { GET } from "../api";
 import { useBudgetsStore } from "../stores/budget";
 
 export interface Suggestion {
@@ -42,9 +42,8 @@ export default defineComponent({
                 return;
             }
             
-            const api = useAPI();
             const budgetStore = useBudgetsStore();
-            api.GET("/budget/" + budgetStore.CurrentBudgetID + "/autocomplete/" + this.type + "?s=" + text)
+            GET("/budget/" + budgetStore.CurrentBudgetID + "/autocomplete/" + this.type + "?s=" + text)
                 .then(x=>x.json())
                 .then(x => {
                     let suggestions = x || [];

web/src/pages/Account.vue

@@ -3,7 +3,7 @@ import { ref } from "vue"
 import Autocomplete, { Suggestion } from '../components/Autocomplete.vue'
 import Currency from "../components/Currency.vue";
 import TransactionRow from "../components/TransactionRow.vue";
-import { useAPI } from "../stores/api";
+import { POST } from "../api";
 import { useAccountStore } from "../stores/budget-account";
 
 const props = defineProps<{
@@ -19,8 +19,7 @@ const Amount = ref(0);
 
 function saveTransaction(e: MouseEvent) {
     e.preventDefault();
-    const api = useAPI();
+    POST("/transaction/new", JSON.stringify({
-    api.POST("/transaction/new", JSON.stringify({
         budget_id: props.budgetid,
         account_id: props.accountid,
         date: TransactionDate,

web/src/pages/Settings.vue

@@ -1,6 +1,6 @@
 <script lang="ts">
 import { defineComponent } from "vue"
-import { useAPI } from "../stores/api";
+import { DELETE, POST } from "../api";
 import { useBudgetsStore } from "../stores/budget";
 import { useSessionStore } from "../stores/session";
 
@@ -35,8 +35,7 @@ export default defineComponent({
             if (currentBudgetID == null)
                 return;
 
-            const api = useAPI();
+            DELETE("/budget/" + currentBudgetID);
-            api.DELETE("/budget/" + currentBudgetID);
 
             const budgetStore = useSessionStore();
             budgetStore.Budgets.delete(currentBudgetID);
@@ -44,8 +43,7 @@ export default defineComponent({
         },
         clearBudget() {
             const currentBudgetID = useBudgetsStore().CurrentBudgetID;
-            const api = useAPI();
+            POST("/budget/" + currentBudgetID + "/settings/clear", null)
-            api.POST("/budget/" + currentBudgetID + "/settings/clear", null)
         },
         cleanNegative() {
             // <a href="/budget/{{.Budget.ID}}/settings/clean-negative">Fix all historic negative category-balances</a>

web/src/stores/api.ts

@@ -1,28 +0,0 @@
-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

@@ -1,5 +1,5 @@
 import { defineStore } from "pinia"
-import { useAPI } from "./api";
+import { GET } from "../api";
 import { useSessionStore } from "./session";
 
 interface State {
@@ -81,14 +81,12 @@ export const useAccountStore = defineStore("budget/account", {
             await this.FetchAccount(accountid);
         },
         async FetchAccount(accountid : string) {
-            const api = useAPI();
+            const result = await GET("/account/" + accountid + "/transactions");
-            const result = await api.GET("/account/" + accountid + "/transactions");
             const response = await result.json();
             this.Transactions = response.Transactions;
         },
         async FetchMonthBudget(budgetid : string, year : number, month : number) {
-            const api = useAPI();
+            const result = await GET("/budget/" + budgetid + "/" + year + "/" + month);
-            const result = await api.GET("/budget/" + budgetid + "/" + year + "/" + month);
             const response = await result.json();
             this.addCategoriesForMonth(year, month, response.Categories);
         },

web/src/stores/budget.ts

@@ -1,5 +1,5 @@
 import { defineStore } from "pinia";
-import { useAPI } from "./api";
+import { GET, POST } from "../api";
 import { useAccountStore } from "./budget-account";
 import { Budget, useSessionStore } from "./session";
 
@@ -25,15 +25,13 @@ export const useBudgetsStore = defineStore('budget', {
     },
     actions: {
         ImportYNAB(formData: FormData) {
-            const api = useAPI();
+            return POST(
-            return api.POST(
                 "/budget/" + this.CurrentBudgetID + "/import/ynab",
                 formData,
             );
         },
         async NewBudget(budgetName: string): Promise<void> {
-            const api = useAPI();
+            const result = await POST(
-            const result = await api.POST(
                 "/budget/new",
                 JSON.stringify({ name: budgetName })
             );
@@ -51,8 +49,7 @@ export const useBudgetsStore = defineStore('budget', {
             await this.FetchBudget(budgetid);
         },
         async FetchBudget(budgetid: string) {
-            const api = useAPI();
+            const result = await GET("/budget/" + budgetid);
-            const result = await api.GET("/budget/" + budgetid);
             const response = await result.json();
             for (const account of response.Accounts || []) {
                 useAccountStore().Accounts.set(account.ID, account);

web/src/stores/session.ts

@@ -1,6 +1,6 @@
 import { StorageSerializers, useStorage } from '@vueuse/core';
 import { defineStore } from 'pinia'
-import { useAPI } from './api';
+import { POST } from '../api';
 
 interface State {
     Session: Session | null
@@ -40,14 +40,12 @@ export const useSessionStore = defineStore('session', {
             this.Budgets = x.Budgets;
         },
         async login(login: any) {
-            const api = useAPI();
+            const response = await POST("/user/login", JSON.stringify(login));
-            const response = await api.POST("/user/login", JSON.stringify(login));
             const result = await response.json();
             return this.loginSuccess(result);
         },
         async register(login : any) {
-            const api = useAPI();
+            const response = await POST("/user/register", JSON.stringify(login));
-            const response = await api.POST("/user/register", JSON.stringify(login));
             const result = await response.json();
             return this.loginSuccess(result);
         },