move loading state into component

change behavior and add getter to trigger the reloading of data

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);
       });