start to properly use vuex

resources/assets/scripts/components/dashboard/Dashboard.vue

@@ -11,16 +11,16 @@
                        ref="search"
                 />
             </div>
-            <div v-if="this.loading" class="my-4 animate fadein">
+            <div v-if="this.isServersLoading" class="my-4 animate fadein">
                 <div class="text-center h-16">
                     <span class="spinner spinner-xl"></span>
                 </div>
             </div>
-            <transition-group class="w-full m-auto mt-4 animate fadein sm:flex flex-wrap content-start" v-else>
+            <transition-group class="w-full m-auto mt-4 animate fadein sm:flex flex-wrap content-start">
                 <server-box
-                        v-for="(server, index) in servers.models"
-                        v-bind:key="index"
-                        v-bind:server="server"
+                        v-for="(server, index) in this.serverList"
+                        :key="index"
+                        :server="server"
                 />
             </transition-group>
         </div>
@@ -29,11 +29,11 @@
 
 <script>
     import { DateTime } from 'luxon';
-    import { ServerCollection } from '../../models/server';
     import _ from 'lodash';
     import Flash from '../Flash';
     import ServerBox from './ServerBox';
     import Navigation from '../core/Navigation';
+    import {mapGetters, mapState} from 'vuex'
 
     export default {
         name: 'dashboard',
@@ -41,18 +41,24 @@
         data: function () {
             return {
                 backgroundedAt: DateTime.local(),
-                documentVisible: true,
-                loading: true,
                 search: '',
-                servers: new ServerCollection,
             }
         },
 
+        computed: {
+            ...mapGetters([
+                'isServersLoading',
+                'serverList'
+            ]),
+            ...mapState({
+                servers: 'servers'
+            })
+        },
         /**
          * Start loading the servers before the DOM $.el is created.
          */
         created: function () {
-            this.loadServers();
+            this.$store.dispatch('loadServers')
 
             document.addEventListener('visibilitychange', () => {
                 this.documentVisible = document.visibilityState === 'visible';
@@ -69,44 +75,6 @@
         },
 
         methods: {
-            /**
-             * Load the user's servers and render them onto the dashboard.
-             *
-             * @param {string} query
-             */
-            loadServers: function (query = '') {
-                this.loading = true;
-                window.axios.get(this.route('api.client.index'), {
-                    params: { query },
-                })
-                    .finally(() => {
-                        this.clearFlashes();
-                    })
-                    .then(response => {
-                        this.servers = new ServerCollection;
-                        response.data.data.forEach(obj => {
-                            this.getResourceUse(
-                                this.servers.add(obj.attributes)
-                            );
-                        });
-
-                        if (this.servers.models.length === 0) {
-                            this.info(this.$t('dashboard.index.no_matches'));
-                        }
-                    })
-                    .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;
-                    });
-            },
 
             /**
              * Handle a search for servers but only call the search function every 500ms