web/src/main.js

@@ -1,54 +1,7 @@
 import { createApp } from 'vue/dist/vue.esm-bundler'
-import { createStore } from 'vuex'
 import App from './App.vue'
 import router from './router/routes.js'
-
+import store from './store/index.js'
-const store = createStore({
-    state () {
-        return {
-            Session: {
-                Token: null,
-                User: null
-            },
-            Budgets: [],
-            CurrentBudget: null,
-        }
-    },
-    mutations: {
-        initializeStore(state) {
-            let store = localStorage.getItem("store");
-            if(store){
-                this.replaceState(
-                    Object.assign(state, JSON.parse(store))
-                );
-            }
-        },
-        getDashboard (state) {
-            fetch("/api/v1/dashboard", {
-                headers: {
-                    'Authorization': 'Bearer ' + state.Session.Token
-                }
-            })
-                .then(x => x.json())
-                .then(x => state.Budgets = x.Budgets);
-        },
-        setTitle (state, title) {
-            document.title = "Budgeteer - " + title;
-        },
-        setToken(state, token) {
-            state.Session.Token = token;
-        }
-    }
-})
-
-store.subscribe((mutation, state) => {
-    let persistedState = {
-        Session: state.Session,
-        Budgets: state.Budgets,
-        CurrentBudget: state.CurrentBudget
-    }
-    localStorage.setItem("store", JSON.stringify(persistedState));
-})
 
 const app = createApp(App)
 app.use(router)

web/src/pages/Dashboard.vue

@@ -6,7 +6,7 @@ export default {
         }
     },
     mounted () {
-        this.$store.commit("getDashboard");
+        this.$store.dispatch("fetchDashboard");
     }
 }
 </script>

web/src/store/dashboard/index.js

@@ -0,0 +1,26 @@
+const dashboard = {
+    state () {
+        return {
+            Budgets: [],
+            CurrentBudget: null,
+        }
+    },
+    mutations: {
+        setBudgets (state, budgets) {
+                state.Budgets = budgets;
+        }
+    },
+    actions: {
+        fetchDashboard ({state, commit, rootState}) {
+            fetch("/api/v1/dashboard", {
+                headers: {
+                    'Authorization': 'Bearer ' + rootState.Session.Token
+                }
+            })
+                .then(x => x.json())
+                .then(x => commit("setBudgets", x.Budgets));
+        }
+    }
+}
+
+export default dashboard

web/src/store/index.js

@@ -0,0 +1,43 @@
+import { createStore } from 'vuex'
+import dashboard from './dashboard/index.js'
+
+const store = createStore({
+    state () {
+        return {
+            Session: {
+                Token: null,
+                User: null
+            },
+        }
+    },
+    mutations: {
+        initializeStore(state) {
+            let store = localStorage.getItem("store");
+            if(store){
+                this.replaceState(
+                    Object.assign(state, JSON.parse(store))
+                );
+            }
+        },
+        setTitle (state, title) {
+            document.title = "Budgeteer - " + title;
+        },
+        setToken(state, token) {
+            state.Session.Token = token;
+        }
+    },
+    modules: {
+        dashboard
+    }
+})
+
+store.subscribe((mutation, state) => {
+    let persistedState = {
+        Session: state.Session,
+        Budgets: state.Budgets,
+        CurrentBudget: state.CurrentBudget
+    }
+    localStorage.setItem("store", JSON.stringify(persistedState));
+})
+
+export default store