use vuex

src/components/InfobaseList.vue

@@ -1,16 +1,16 @@
 <template>
   <div class="container-fluid">
     <h2>Список баз</h2>
-    <div v-if="loading_error" class="text-danger m-4">
+    <div v-if="isLoadingError" class="text-danger m-4">
       <span class="fs-1">&#9940;</span><br />
       <h3>Ошибка загрузки</h3>
     </div>
-    <div v-else-if="is_loading" class="container">
+    <div v-else-if="isLoading" class="container">
       <div class="spinner-border text-primary" role="status">
         <span class="visually-hidden">Loading...</span>
       </div>
     </div>
-    <div v-else-if="0 == infobases.length" class="container">
+    <div v-else-if="0 == allInfobases.length" class="container">
       <div class="alert alert-warning" role="alert">
         <svg class="m-2" width="32" height="32">
           <use xlink:href="#exclamation-triangle-fill--sprite"></use>
@@ -28,7 +28,7 @@
         </tr>
       </thead>
       <tbody>
-        <tr v-for="(infobase, index) in infobases" :key="infobase.name">
+        <tr v-for="(infobase, index) in allInfobases" :key="infobase.name">
           <th class="text-end" scope="row">{{ index + 1 }}</th>
           <td class="text-center">{{ infobase.name }}</td>
           <td class="text-start">
@@ -93,12 +93,10 @@
 
 <script>
 import "bootstrap-icons/icons/exclamation-triangle-fill.svg?sprite";
-import axios from "axios";
+import { mapGetters } from "vuex";
 
 import InfobaseURLEditor from "@/components/InfobaseURLEditor.vue";
 
-const api_base = "http://localhost:17653/api/v1";
-
 export default {
   name: "InfobaseList",
   components: {
@@ -111,9 +109,10 @@ export default {
     infobases: [],
     url_editors: {},
   }),
+  computed: mapGetters(["allInfobases", "isLoading", "isLoadingError"]),
   methods: {
     infobase(name) {
-      return this.infobases.find((infobase) => name === infobase.name);
+      return this.allInfobases.find((infobase) => name === infobase.name);
     },
     add_publication(name) {
       let infobase = this.infobase(name);
@@ -151,32 +150,7 @@ export default {
     },
   },
   async mounted() {
-    try {
+    this.$store.dispatch("fetchInfobases");
-      const res = await axios.get(`${api_base}/infobases`);
-      if (!res) {
-        return;
-      }
-      const names = res.data;
-      if (!Array.isArray(names)) {
-        this.loading_error = true;
-        return;
-      }
-
-      if (0 < names.length) {
-        if ("string" !== typeof names[0]) {
-          this.loading_error = true;
-          return;
-        }
-      }
-
-      this.is_loading = false;
-      this.loading_error = false;
-      this.infobases = names.map((name) => {
-        return { name: name, publicated: "bpdemo" === name, url: "/" };
-      });
-    } catch (err) {
-      this.loading_error = true;
-    }
   },
 };
 </script>

src/store/index.js

@@ -1,8 +1,9 @@
 import { createStore } from "vuex";
 
+import infobases from "@/store/modules/infobases.js";
+
 export default createStore({
-  state: {},
+  modules: {
-  mutations: {},
+    infobases,
-  actions: {},
+  },
-  modules: {},
 });

src/store/modules/infobases.js

@@ -0,0 +1,70 @@
+import axios from "axios";
+
+const api_base = "http://localhost:17653/api/v1";
+const LoadingStatus = Object.freeze({
+    Loaded: {loading: false, error: false},
+    Loading: {loading: true, error: false},
+    Error: {loading: false, error: true},
+});
+
+export default {
+  state: {
+    publicated: [],
+    available: [],
+    infobases: [],
+    loading_error: false,
+    is_loading: false,
+  },
+  mutations: {
+    setLoadingStatus(state, {loading, error}) {
+      state.is_loading = loading && ! error;
+      state.loading_error = error;
+    },
+    updateInfobases(state, infobases) {
+      state.infobases = infobases;
+    },
+  },
+  actions: {
+    async fetchInfobases(ctx) {
+      ctx.commit("setLoadingStatus", LoadingStatus.Loading);
+      try {
+        const res = await axios.get(`${api_base}/infobases`);
+        if (!res) {
+          ctx.commit("setLoadingStatus", LoadingStatus.Error);
+          return;
+        }
+        const names = res.data;
+        if (!Array.isArray(names)) {
+          ctx.commit("setLoadingStatus", LoadingStatus.Error);
+          return;
+        }
+
+        if (0 < names.length) {
+          if ("string" !== typeof names[0]) {
+            ctx.commit("setLoadingStatus", LoadingStatus.Error);
+            return;
+          }
+        }
+
+        ctx.commit("setLoadingStatus", LoadingStatus.Loaded);
+        let infobases = names.map((name) => {
+          return { name: name, publicated: "bpdemo" === name, url: "/" };
+        });
+        ctx.commit("updateInfobases", infobases);
+      } catch (err) {
+        ctx.commit("setLoadingStatus", LoadingStatus.Error);
+      }
+    },
+  },
+  getters: {
+    allInfobases(state) {
+      return state.infobases;
+    },
+    isLoading(state) {
+      return state.is_loading;
+    },
+    isLoadingError(state) {
+      return state.loading_error;
+    },
+  },
+};