顶栏菜单和侧边栏菜单数据提取到 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
           }
         })

src/main.js

@@ -14,6 +14,7 @@ import i18n from './i18n'
 import util from '@/libs/util'
 import store from '@/store/index'
 import { frameInRoutes } from '@/router/routes'
+import { menusAside, menusHeader } from '@/menu'
 import '@/assets/library/font-awesome-4.7.0/css/font-awesome.min.css'
 import '@/assets/library/highlight/styles/atom-one-light.css'
 import '@/assets/svg-icons'
@@ -46,6 +47,8 @@ new Vue({
   created () {
     // 处理路由 得到每一级的路由设置
     this.getAllTagFromRoutes()
+    // 设置顶栏菜单
+    this.$store.commit('d2adminMenusHeaderSet', menusHeader)
   },
   mounted () {
     util.showInfo()
@@ -60,6 +63,13 @@ new Vue({
     // 初始化全屏监听
     this.fullscreenListenerInit()
   },
+  watch: {
+    // 监听路由 控制侧边栏显示
+    '$route.matched' (val) {
+      const _side = menusAside.filter(menu => menu.path === val[0].path)
+      this.$store.commit('d2adminMenusAsideSet', _side.length > 0 ? _side[0].children : [])
+    }
+  },
   methods: {
     /**
      * 初始化全屏监听

src/menu/index.js

@@ -10,7 +10,7 @@ import demoElement from './modules/demo-element'
 import demoPlayground from './modules/demo-playground'
 
 // 菜单 侧边栏
-export const side = [
+export const menusAside = [
   demoPlugins,
   demoComponents,
   demoCharts,
@@ -19,7 +19,7 @@ export const side = [
 ]
 
 // 菜单 顶栏
-export default [
+export const menusHeader = [
   {
     path: '/index',
     title: '首页',

src/store/modules/d2admin.js.REMOVED.git-id

@@ -1 +1 @@
-8b96913312c7e84f4f1c5425973faa3d97304883
+303f0d76d55f00375ac5d17efcd00212c3bc2619