Подключаем api

client/api/misc.js

@@ -1,8 +1,8 @@
 import axios from 'axios';
 
 class Misc {
-    async getConfig() {
-        const response = await axios.post('/api/config', {params: ['name', 'version']});
+    async loadConfig() {
+        const response = await axios.post('/api/config1', {params: ['name', 'version']});
         return response.data;
     }
 }

client/components/App.vue

@@ -1,6 +1,7 @@
 <template>
     <el-container>
         <el-aside :width="asideWidth">
+            {{ appName }}
             <el-button class="el-button-collapse" @click="toggleCollapse" :icon="buttonCollapseIcon"></el-button>
             <el-menu default-active="1" class="el-menu-vertical" @select="handleSelect" :collapse="isCollapse">
               <el-menu-item index="1">
@@ -27,7 +28,7 @@
         </el-aside>
 
         <el-main>
-            Main
+            <pre>{{ apiError }}</pre>
         </el-main>
     </el-container>
 </template>
@@ -44,7 +45,23 @@ export default @Component({
 class App extends Vue {
     created() {
         this.commit = this.$store.commit;
-        this.uistate = this.$store.state.uistate;        
+        this.dispatch = this.$store.dispatch;
+        this.state = this.$store.state;
+        this.uistate = this.$store.state.uistate;
+        this.config = this.$store.state.config;
+    }
+
+    mounted() {
+        this.dispatch('config/loadConfig');
+        this.$watch('apiError', function(newError, oldError) {
+            if (newError) {
+                this.$notify.error({
+                    title: 'Error',
+                    dangerouslyUseHTMLString: true,
+                    message: newError.response.config.url + '<br>' + newError.response.statusText
+                });
+            }
+        });
     }
 
     handleSelect(key, keyPath) {
@@ -74,6 +91,14 @@ class App extends Vue {
             return 'el-icon-d-arrow-left';
         }
     }
+
+    get appName() {
+        return `${this.config.name} v${this.config.version}`;
+    }
+
+    get apiError() {
+        return this.state.apiError;
+    }
 }
 </script>
 

client/store/index.js

@@ -2,16 +2,19 @@ import Vue from 'vue';
 import Vuex from 'vuex';
 import createPersistedState from 'vuex-persistedstate';
 
+import root from './root.js';
 import uistate from './modules/uistate';
+import config from './modules/config';
 
 Vue.use(Vuex);
 
 const debug = process.env.NODE_ENV !== 'production';
 
-export default new Vuex.Store({
+export default new Vuex.Store(Object.assign({}, root, {
   modules: {
-    uistate
+    uistate,
+    config
   },
   strict: debug,
   plugins: [createPersistedState()]
-});
+}));

client/store/modules/config.js

@@ -0,0 +1,38 @@
+import miscApi from '../../api/misc';
+// initial state
+const state = {
+    name: null,
+    version: null,
+};
+
+// getters
+const getters = {};
+
+// actions
+const actions = {
+    async loadConfig({ commit, state }) {
+        commit('setApiError', null, { root: true });
+        commit('setConfig', {});
+        try {
+            const config = await miscApi.loadConfig();
+            commit('setConfig', config);
+        } catch (e) {
+            commit('setApiError', e, { root: true });
+        }
+    },
+};
+
+// mutations
+const mutations = {
+    setConfig(state, value) {
+        Object.assign(state, value);
+    },
+};
+
+export default {
+    namespaced: true,
+    state,
+    getters,
+    actions,
+    mutations
+};

client/store/modules/uistate.js

@@ -1,6 +1,6 @@
 // initial state
 const state = {
-  asideBarCollapse: false,
+    asideBarCollapse: false,
 };
 
 // getters
@@ -11,15 +11,15 @@ const actions = {};
 
 // mutations
 const mutations = {
-  setAsideBarCollapse(state, value) {
-    state.asideBarCollapse = value;
-  },
+    setAsideBarCollapse(state, value) {
+        state.asideBarCollapse = value;
+    },
 };
 
 export default {
-  namespaced: true,
-  state,
-  getters,
-  actions,
-  mutations
+    namespaced: true,
+    state,
+    getters,
+    actions,
+    mutations
 };

client/store/root.js

@@ -0,0 +1,25 @@
+// initial state
+const state = {
+    apiError: null,
+};
+
+// getters
+const getters = {};
+
+// actions
+const actions = {};
+
+// mutations
+const mutations = {
+    setApiError(state, value) {
+        state.apiError = value;
+    },
+};
+
+export default {
+    namespaced: true,
+    state,
+    getters,
+    actions,
+    mutations
+};