Remove vuex

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>