optimize active menu item logic

Author: Riley Ren

src/App.vue

@@ -2,7 +2,7 @@
   <div id="app">
     <div class="wrapper">
       <div class="wrapper-header">
-        <Header :active-key="activeKey" @on-change="handleNavMenuChange" @on-sign-out="signOut" @on-sign-in="showSignIn"></Header>
+        <Header @on-change="handleNavMenuChange" @on-sign-out="signOut" @on-sign-in="showSignIn"></Header>
       </div>
       <div class="wrapper-container">
         <div class="wrapper-content ivu-article">
@@ -32,14 +32,13 @@ export default {
   },
   data() {
     return {
-      activeKey: 'projects',
-      signIn: false
+      // activeKey: 'projects',
     };
   },
   computed: {
     ...mapGetters('sign', {
       'showSignModal': 'showModal'
-    })
+    }),
   },
   methods: {
     ...mapMutations('sign', {
@@ -53,7 +52,7 @@ export default {
       });
     },
     handleNavMenuChange (val) {
-        this.activeKey = val;
+      this.activeKey = val;
     }
   },
 };

src/pages/components/Header.vue

@@ -1,5 +1,5 @@
 <template>
-    <Menu mode="horizontal" :active-name="currentActiveKey" @on-select="handleSelect">
+    <Menu mode="horizontal" :active-name="activeMenu" @on-select="handleSelect">
         <div class="wrapper-header-nav">
             <router-link to="/" class="wrapper-header-nav-logo">
                 <span>营销平台</span>
@@ -48,70 +48,69 @@
 
 <script>
 import { mapGetters, mapMutations } from 'vuex';
+import * as types from '@/store/mutation-types';
 
 export default {
     props: {
-        activeKey: String
     },
     data () {
         return {
-            currentActiveKey: this.activeKey,
         };
     },
+    mounted() {
+        var menu = '';
+        switch(this.$route.path) {
+            case '/template':
+                menu = 'template';
+            break;
+            case '/project':
+                menu = 'project';
+            break;
+            case '/charge-off':
+                menu = 'charge-off';
+            break;
+        }
+        this.changeActiveMenu({ menu });
+    },
     computed: {
         ...mapGetters('sign', {
-          'signed': 'signed'
-        })
+          'signed': 'signed',
+        }),
+        ...mapGetters('app', [
+          'activeMenu',
+        ]),
     },
     watch: {
-        activeKey (val) {
-            this.currentActiveKey = val;
-        },
-        currentActiveKey (val) {
-            this.$emit('on-change', val);
-        }
     },
     methods: {
+        ...mapMutations('app', {
+          changeActiveMenu: types.ACTIVE_MENU_CHANGE,
+        }),
         handleSelect (type) {
+            let menu = '';
             if (type === 'index') {
                 this.$router.push('/');
             } else if (type === 'project') {
                 this.$router.push('/project');
+                menu = 'project';
             } else if (type === 'template') {
                 this.$router.push('/template');
+                menu = 'template';
             } else if (type === 'charge-off') {
                 this.$router.push('/charge-off');
+                menu = 'charge-off';
             } else if (type === 'sign-out') {
                 this.$emit('on-sign-out');
             }
-            this.$nextTick(() => {
-                this.updateActiveNav();
-            });
-        },
-        updateActiveNav () {
-            // const componentList = [
-            //     '/docs/guide/install',
-            //     '/docs/guide/start',
-            //     '/docs/guide/i18n',
-            //     '/docs/guide/theme',
-            //     '/docs/guide/iview-loader',
-            //     '/overview',
-            //     '/docs/guide/update'
-            // ];
-
-            const route = this.$route.path;
-            
-            
-            // if (route.indexOf('component') > -1 || componentList.indexOf(route) > -1) {
-            //     this.currentActiveKey = 'component';
-            // } else if (route.indexOf('practice') > -1) {
-            //     this.currentActiveKey = 'practice';
-            // } else if (route.indexOf('live') > -1) {
-            //     this.currentActiveKey = 'live';
-            // } else {
-            //     this.currentActiveKey = 'guide';
-            // }
+            this.changeActiveMenu({ menu });
+            // this.$nextTick(() => {
+            //     this.updateActiveNav();
+            // });
         },
+        // updateActiveNav () {
+        //     const route = this.$route.path;
+        //     console.log(route);
+        // },
         handleSignIn () {
             this.$emit('on-sign-in');
         }

src/store/index.js

@@ -5,6 +5,7 @@ import * as actions from './actions';
 import * as getters from './getters';
 import todo from './modules/todo';
 import sign from './modules/sign';
+import app from './modules/app';
 
 Vue.use(Vuex);
 
@@ -15,7 +16,8 @@ export default new Vuex.Store({
   getters,
   modules: {
     todo,
-    sign
+    sign,
+    app,
   },
   strict: debug,
   plugins: debug ? [createLogger()] : [],

src/store/modules/app.js

@@ -0,0 +1,32 @@
+import * as types from '../mutation-types';
+
+/* eslint-disable no-shadow */
+
+// initial state
+const state = {
+  activeMenu: '',
+};
+
+// getters
+const getters = {
+  activeMenu: (state) => state.activeMenu,
+};
+
+// actions
+const actions = {
+};
+
+// mutations
+const mutations = {
+  [types.ACTIVE_MENU_CHANGE](state, { menu }) {
+    state.activeMenu = menu;
+  }
+};
+
+export default {
+  state,
+  getters,
+  actions,
+  mutations,
+  namespaced: true,
+};

src/store/mutation-types.js

@@ -10,3 +10,6 @@ export const SIGN_OUT = 'SIGN_OUT';
 export const RESTORE_SIGN = 'RESTORE_SIGN';
 export const SHOW_SIGN_IN_MODAL = 'SHOW_SIGN_IN_MODAL';
 export const HIDE_SIGN_IN_MODAL = 'HIDE_SIGN_IN_MODAL';
+
+
+export const ACTIVE_MENU_CHANGE = 'ACTIVE_MENU_CHANGE';