顶栏菜单和侧边栏菜单数据提取到 vuex

Former-commit-id: 6414875fd24cb35bccc742e5a3e514eb38d0ccf0 [formerly e6a168bccde74a52be0c830c2801c3b68e142a02] [formerly 6414875fd24cb35bccc742e5a3e514eb38d0ccf0 [formerly e6a168bccde74a52be0c830c2801c3b68e142a02] [formerly 6414875fd24cb35bccc742e5a3e514eb38d0ccf0 [formerly e6a168bccde74a52be0c830c2801c3b68e142a02] [formerly e6a168bccde74a52be0c830c2801c3b68e142a02 [formerly 3c4b8f0831e08f17fb7d2d5925d1afac95a09ba9 [formerly 2147cfbd14ff74f1a7a370bd2a72421ef1efa062]]]]]
Former-commit-id: 9ea5625e0ed3d637f244b1713e3f9a756083759d
Former-commit-id: dd1b1385527e9a1bf0cef74820c7610fbbbd549a
Former-commit-id: f003427229e0fbde1fc334fcf49488de2518e587 [formerly f16a7e264842bd11f1f68707ec802948f69c45ea]
Former-commit-id: a569f31c6a01744eefb1cb0a660b419591a0c2b9
Former-commit-id: 1c5137d112590a66cb3c6383d26c9cd279a2b705
Former-commit-id: fb99d584dc8ebfe3553f5d77402ae614a2056ee5
Former-commit-id: 26093b1997b824a3db9f27b392ca912e622e3397
Former-commit-id: 4d82cce9bd2dda1e6de9407492d4e9c4c27e5da7

src/layout/header-aside/components/menu-header/index.vue

@@ -1,6 +1,6 @@
 <template>
   <el-menu mode="horizontal" @select="handleMenuSelect">
-    <template v-for="(menu, menuIndex) in menus">
+    <template v-for="(menu, menuIndex) in menusHeader">
       <d2-layout-header-aside-menu-item v-if="menu.children === undefined" :menu="menu" :key="menuIndex"/>
       <d2-layout-header-aside-menu-sub v-else :menu="menu" :key="menuIndex"/>
     </template>
@@ -8,12 +8,10 @@
 </template>
 
 <script>
-import menus from '@/menu/index.js'
+import { mapState } from 'vuex'
 import menuMixin from '../mixin/menu'
-// 组件
 import d2LayoutMainMenuItem from '../components/menu-item/index.vue'
 import d2LayoutMainMenuSub from '../components/menu-sub/index.vue'
-
 export default {
   name: 'd2-layout-header-aside-menu-header',
   mixins: [
@@ -23,10 +21,10 @@ export default {
     'd2-layout-header-aside-menu-item': d2LayoutMainMenuItem,
     'd2-layout-header-aside-menu-sub': d2LayoutMainMenuSub
   },
-  data () {
-    return {
-      menus
-    }
+  computed: {
+    ...mapState({
+      menusHeader: state => state.d2admin.menusHeader
+    })
   }
 }
 </script>

src/layout/header-aside/components/menu-side/index.vue

@@ -6,12 +6,12 @@
       :default-active="active"
       ref="menu"
       @select="handleMenuSelect">
-      <template v-for="(menu, menuIndex) in menus">
+      <template v-for="(menu, menuIndex) in menusAside">
         <d2-layout-header-aside-menu-item v-if="menu.children === undefined" :menu="menu" :key="menuIndex"/>
         <d2-layout-header-aside-menu-sub v-else :menu="menu" :key="menuIndex"/>
       </template>
     </el-menu>
-    <div v-if="menus.length === 0 && !collapse" class="d2-layout-header-aside-menu-empty">
+    <div v-if="menusAside.length === 0 && !collapse" class="d2-layout-header-aside-menu-empty">
       <d2-icon name="hdd-o"/>
       <span>当前目录没有菜单</span>
     </div>
@@ -19,14 +19,11 @@
 </template>
 
 <script>
-import { side } from '@/menu/index.js'
+import { mapState } from 'vuex'
 import menuMixin from '../mixin/menu'
-// 组件
 import d2LayoutMainMenuItem from '../components/menu-item/index.vue'
 import d2LayoutMainMenuSub from '../components/menu-sub/index.vue'
-// 插件
 import BScroll from 'better-scroll'
-
 export default {
   name: 'd2-layout-header-aside-menu-side',
   mixins: [
@@ -45,12 +42,16 @@ export default {
   },
   data () {
     return {
-      menus: [],
       active: '',
       asideHeight: 300,
       BS: null
     }
   },
+  computed: {
+    ...mapState({
+      menusAside: state => state.d2admin.menusAside
+    })
+  },
   watch: {
     // 折叠和展开菜单的时候销毁 better scroll
     collapse (val) {
@@ -59,14 +60,12 @@ export default {
         this.scrollInit()
       }, 500)
     },
+    // 监听路由 控制侧边栏激活状态
     '$route.matched': {
       handler (val) {
-        const path = val[0].path
-        const _side = side.filter(menu => menu.path === path)
-        this.menus = _side.length > 0 ? _side[0].children : []
         this.active = val[val.length - 1].path
         this.$nextTick(() => {
-          if (this.menus.length > 0) {
+          if (this.menusAside.length > 0) {
             this.$refs.menu.activeIndex = this.active
           }
         })