Подключаем работу с Vuex

client/api/misc.js

@@ -1,12 +1,15 @@
 import axios from 'axios';
 
-async function test() {
-  try {
-    const response = await axios.post('/api/config', {params: ['version']});
-    console.log(response);
-  } catch (error) {
-    console.error(error.response.data);
-  }
+class Misc {
+    async getConfig() {
+        const response = await axios.post('/api/config', {params: ['name', 'version']});
+        return response.data;
+    }
 }
-test();
 
+let misc = null;
+if (!misc) {
+    misc = new Misc();
+}
+
+export default misc;

client/components/App.vue

@@ -42,23 +42,36 @@ export default @Component({
     },
 })
 class App extends Vue {
-    isCollapse = false;
-    asideWidth = '170px';
-    buttonCollapseIcon = 'el-icon-d-arrow-left';
+    created() {
+        this.commit = this.$store.commit;
+        this.uistate = this.$store.state.uistate;        
+    }
 
     handleSelect(key, keyPath) {
         console.log(key, keyPath);
     }
 
     toggleCollapse() {
-        this.isCollapse = !this.isCollapse;
-        if (this.isCollapse) {
-            this.asideWidth = '64px';
-            this.buttonCollapseIcon = 'el-icon-d-arrow-right';
+        this.commit('uistate/setAsideBarCollapse', !this.uistate.asideBarCollapse);
+    }
+
+    get isCollapse() {
+        return this.uistate.asideBarCollapse;
+    }
+
+    get asideWidth() {
+        if (this.uistate.asideBarCollapse) {
+            return '64px';
+        } else {
+            return '170px';
         }
-        else {
-            this.asideWidth = '170px';
-            this.buttonCollapseIcon = 'el-icon-d-arrow-left';
+    }
+
+    get buttonCollapseIcon() {
+        if (this.uistate.asideBarCollapse) {
+            return 'el-icon-d-arrow-right';
+        } else {
+            return 'el-icon-d-arrow-left';
         }
     }
 }

client/main.js

@@ -2,11 +2,13 @@ import Vue from 'vue';
 import App from './components/App.vue';
 import ElementUI from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
+import store from './store';
 
 //Vue.config.productionTip = false;
 
 Vue.use(ElementUI);
 
 new Vue({
+    store,
     render: h => h(App),
 }).$mount('#app');

client/store/index.js

@@ -0,0 +1,14 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import uistate from './modules/uistate';
+
+Vue.use(Vuex);
+
+const debug = process.env.NODE_ENV !== 'production';
+
+export default new Vuex.Store({
+  modules: {
+    uistate
+  },
+  strict: debug
+});

client/store/modules/uistate.js

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