start to properly use vuex

resources/assets/scripts/store/index.js

@@ -0,0 +1,18 @@
+import Vuex from 'vuex';
+import { sync } from 'vuex-router-sync';
+import { serverModule } from "./modules/server";
+import { userModule } from './modules/user'
+
+const createStore = (router) => {
+    const store = new Vuex.Store({
+        //strict: process.env.NODE_ENV !== 'production',
+        modules: {
+            userModule,
+            serverModule,
+        },
+    });
+    sync(store, router);
+    return store;
+};
+
+export default createStore;

resources/assets/scripts/store/modules/server.js

@@ -0,0 +1,64 @@
+import LoadingState from '../../models/loadingStates';
+import route from '../../../../../vendor/tightenco/ziggy/src/js/route';
+
+export const serverModule = {
+    state: {
+        servers: {},
+        serverIDs: [],
+        currentServerID: '',
+        serverLoadingState: '',
+    },
+    mutations: {
+        setCurrentServer (state, serverID) {
+            state.currentServerID = serverID;
+        },
+        setServers (state, servers) {
+            servers.forEach(s => {
+                state.servers[s.identifier] = s;
+                if (!!state.serverIDs.indexOf(s.identifier)) {
+                    state.serverIDs.push(s.identifier)
+                }
+            });
+        },
+        removeServer (state, serverID) {
+            delete state.servers[serverID];
+            state.serverIDs.remove(serverID);
+        },
+        setServerLoadingState (state, s) {
+            state.serverLoadingState = s;
+        }
+    },
+    actions: {
+        loadServers({ commit }) {
+            commit('setServerLoadingState', LoadingState.LOADING);
+            window.axios.get(route('api.client.index'))
+                .then(response => {
+                    commit('setServers', response.data.data.map(o => o.attributes));
+                    commit('setServerLoadingState', LoadingState.DONE);
+                })
+                .catch(err => {
+                    console.error(err);
+                    const response = err.response;
+                    if (response.data && _.isObject(response.data.errors)) {
+                        response.data.errors.forEach(function (error) {
+                            this.error(error.detail);
+                        });
+                    }
+                })
+                .finally(() => {
+                    this.loading = false;
+                });
+        },
+    },
+    getters: {
+        currentServer (state) {
+            return state.servers[state.route.params.serverID];
+        },
+        isServersLoading (state) {
+            return state.serverLoadingState === LoadingState.LOADING;
+        },
+        serverList (state) {
+            return state.serverIDs.map(k => state.servers[k]);
+        }
+    }
+};

resources/assets/scripts/store/modules/user.js

@@ -0,0 +1,34 @@
+import {User} from "../../models/user";
+
+export const userModule = {
+    state: {
+        user: null,
+    },
+    actions: {
+        login ({ commit }) {
+            commit('setUser', User.fromJWT(localStorage.getItem('token')));
+        },
+        logout ({ commit }) {
+            commit('unsetUser');
+        }
+    },
+    getters: {
+        getCurrentUser: function (state) {
+            return state.user;
+        },
+    },
+    mutations: {
+        /**
+         * Log in a user and store them in vuex using the local storage token.
+         *
+         * @param state
+         * @param user
+         */
+        setUser: function (state, user) {
+            state.user = user;
+        },
+        unsetUser: function (state) {
+            state.user = null;
+        }
+    }
+};