ES6 export 导出常量是函数的结果绑定了函数的调用？

  • Z时代
  • 2024-02-18
  • 分类：IT

import { uniqueId } from 'lodash'
/**
 * @description 给菜单数据补充上 path 字段,并转换后台的字段
 * @description https://github.com/d2-projects/d2-admin/issues/209
 * @param {Array} menu 原始的菜单数据
 */
export function supplementPath (menu) {
  return menu.map(e => ({
    ...e,
    path: e.path || uniqueId('d2-menu-empty-'),
    title: e.title || uniqueId('d2-menu-empty-'),
    ...e.children ? {
      children: supplementPath(e.children)
    } : {}
  }))
}
/**
 * @description 创建菜单
 * @param {Array} routes 动态菜单设置
 */
export function createMenus (menus = []) {
  return supplementPath([
    ...menus
  ])
}
/**
 * @description 重新设置菜单
 * @param {Array} menus 额外追加的菜单
 */
export function resetMenu (menus = []) {
  menuHeader.splice(0)
  menuHeader.push(...menus)
  menuAside.splice(0)
  menuAside.push(...menus)
}
// 默认的头部菜单
export const menuHeader = createMenus()
// 默认的侧边菜单
export const menuAside = createMenus()
import Vue from 'vue'
import i18n from './i18n'
import App from './App'
// 核心插件
import d2Admin from '@/plugin/d2admin'
import d2wangeditor from './components/d2-wangeditor/index.vue'
import d2ueditor from '././components/d2-ueditor'
import VueCoreVideoPlayer from 'vue-core-video-player'
// store
import store from '@/store/index'
import './permission'
import './role'
// 菜单和路由设置
import router from './router'
import { frameInRoutes } from '@/router/routes'
import { menuHeader, menuAside } from '@/menu'
Vue.component('d2-wangeditor', d2wangeditor)// 注册wangeditor编辑器
Vue.component('d2-ueditor', d2ueditor)// 注册ueditor编辑器
// 核心插件
Vue.use(d2Admin)
Vue.use(VueCoreVideoPlayer)
Vue.prototype.$bus = new Vue()
new Vue({
  router,
  store,
  i18n,
  render: h => h(App),
  created () {
    // 处理路由 得到每一级的路由设置+
    this.$store.commit('d2admin/page/init', frameInRoutes)
    // 设置顶栏菜单
    this.$store.commit('d2admin/menu/headerSet', menuHeader)
    // 设置侧边栏菜单
    this.$store.commit('d2admin/menu/asideSet', menuAside)
    // 初始化菜单搜索功能
    this.$store.commit('d2admin/search/init', menuHeader)
  },
  mounted () {
    // 展示系统信息
    this.$store.commit('d2admin/releases/versionShow')
    // 用户登录后从数据库加载一系列的设置
    this.$store.dispatch('d2admin/account/load')
    // 获取并记录用户 UA
    this.$store.commit('d2admin/ua/get')
    // 初始化全屏监听
    this.$store.dispatch('d2admin/fullscreen/listen')
  },
  watch: {
    // 检测路由变化切换侧边栏内容
    '$route.matched': {
      handler (matched) {
        if (matched.length > 0) {
          // 查找左侧菜单，首页path用''来判断
          const _side = menuAside.filter(menu => menu.path === matched[0].path)
          const index = {
            icon: 'home',
            path: '/index',
            title: '首页'
          }
          this.$store.commit('d2admin/menu/asideSet', _side.length > 0 ? _side[0].children : [index])
        }
      },
      immediate: true
    }
  }
}).$mount('#app')

这个 menuAside 常量是函数 createMenus 的结果，但是第一次引用 menuAside 这个函数的执行结果是空，只是其它地方直接调用createMenus函数，到了事件监听里面 menuAside又变的有值了很奇怪。不知道你们看懂没。

回答：

因为你 epoxrt const menuAside 暴露的是函数 createMenus 的执行结果，所以第一次的结果是空。
到了其他部分执行了 createMenus 函数，多半是同时触发了 vuex 的 commit 操作，修改了 store 中的 menuAside 参数值。

或者说你在展开赋值的时候（supplementPath([...menus])）的问题，因为内部的子路由可能是引用类型，所以会去修改源数据。

因为贴的相关代码比较少也就只能这样猜测了。

以上是 ES6 export 导出常量是函数的结果绑定了函数的调用？ 的全部内容， 来源链接： utcz.com/p/934504.html

回到顶部