move loading state into component

change behavior and add getter to trigger the reloading of data

src/pages/Customers.vue

@@ -1,14 +1,10 @@
 <template>
   <section class="section">
-    <div class="container" v-if="loading">
+    <div class="container">
-      Loading...
-    </div>
-
-    <div class="container" v-if="!loading">
       <header class="is-clearfix">
         <div class="control is-grouped is-pulled-right">
           <div class="control">
-            <a class="button" @click="fetchCustomers()">
+            <a class="button" :class="{ 'is-loading': loading }" @click="fetchCustomers()">
               <span class="icon is-small">
                 <i class="fa fa-refresh"></i>
               </span>
@@ -48,7 +44,7 @@
 </template>
 
 <script>
-  import { mapActions, mapState } from 'vuex';
+  import { mapState, mapGetters } from 'vuex';
   import CustomerCard from '../components/CustomerCard.vue';
   import CustomerTable from '../components/CustomerTable.vue';
   import CustomerRow from '../components/CustomerRow.vue';
@@ -61,35 +57,35 @@
       CustomerRow,
     },
     data() {
-      const mockCustomer = (num) => ({
-        firstname: 'John',
-        lastname: `Doe${num}`,
-        city: 'cityton',
-        state: 'AZ',
-        email: 'john@email.com',
-      });
-
       return {
         mode: 'cards',
+        loading: false,
       }
     },
     computed: Object.assign({}, mapState('customers', [
       'customers',
-      'loading',
       'updatedAt',
+    ]), mapGetters('customers', [
+      'shouldUpdate'
     ])),
-    methods: Object.assign({
+    methods: {
       setMode(mode) {
         this.mode = (mode === 'table') ? 'table' : 'cards';
       },
-    }, mapActions('customers', [
+      fetchCustomers() {
-      'fetchCustomers',
+        this.loading = true;
-    ])),
-    created() {
-      const diffTime = (new Date().getTime()) - this.updatedAt;
-      const seconds = 30;
 
-      if (diffTime >= seconds * 1000) this.fetchCustomers();
+        this.$store.dispatch('customers/fetchCustomers')
+        .then(() => this.loading = false);
+      }
+    },
+    created() {
+      if (this.shouldUpdate(30)) {
+        this.loading = true;
+
+        this.$store.dispatch('customers/fetchCustomers')
+        .then(() => this.loading = false);
+      }
     },
   }
 </script>

src/store/customers.js

@@ -1,7 +1,6 @@
 export default {
   namespaced: true,
   state: {
-    loading: false,
     customers: [],
     updatedAt: 0,
     pagination: {
@@ -9,6 +8,13 @@ export default {
       count: 10,
     },
   },
+  getters: {
+    shouldUpdate: state => (seconds = 30) => {
+      const diffTime = (new Date().getTime()) - state.updatedAt;
+      console.log('shouldUpdate', diffTime >= seconds * 1000)
+      return diffTime >= seconds * 1000;
+    },
+  },
   mutations: {
     setCustomers(state, customers) {
       state.customers = customers;
@@ -18,13 +24,12 @@ export default {
       if (opts.page) state.pagination.page = opts.page;
       if (opts.count) state.pagination.count = opts.count;
     },
-    toggleLoading(state, loading) {
-      state.loading = loading || !state.loading;
-    },
   },
   actions: {
+    setPagination({ commit }, opts = {}) {
+      commit('setPagination', opts);
+    },
     fetchCustomers({ commit, state }, opts = {}) {
-      commit('toggleLoading', true);
       commit('setPagination', opts);
 
       // TODO: fetch customers from server
@@ -77,7 +82,6 @@ export default {
           const { page, count } = state.pagination;
           const results = customers.slice(page, count);
           commit('setCustomers', results);
-          commit('toggleLoading', false);
           resolve();
         }, 300);
       });