admin/src/store/app.js

function flatten (parent, data = [], menusRaw = []) {
  return data.reduce((acc, { name, children }) => {
    const menu = menusRaw.filter(x => x.Url === name)[0]
    if (!menu) return acc

    const MenuName = menu.MenuName
    const item = { Url: name, MenuName, parent }

    if (children && children.length) {
      const p = parent.concat({ Url: name, MenuName })
      return acc.concat(item, flatten(p, children, menusRaw))
    }

    return acc.concat(item)
  }, [])
}

function packChildren (data) {
  let cp = data.slice()
  const res = []

  data.forEach((it, inx) => {
    let found = false
    for (let i = 0; i < cp.length; i += 1) {
      if (cp[i].MenuId === it.FatherId) {
        found = true
        cp[i].children = [...(cp[i].children || []), cp[inx]]
        break
      }
    }

    if (!found) {
      res.push(cp[inx])
    }
  })

  return res
}

export default {
  state: {
    menusRaw: [],
    menus: [],
    breadcrumb: [],
    cases: [],
    roles: [],
    user: {}
  },
  mutations: {
    init (state, data) { // 这里的state对应着上面这个state
      state.cases = data.cases
      state.menusRaw = data.menus
      state.roles = data.roles
      state.user = data.user
      state.menus = packChildren(data.menus)
    },

    updateBread (state, { routerData, Url }) {
      // 扁平 routerData
      // 同时构造出 含有 title 的 parent 数据
      const routeList = flatten([], routerData[1].children, state.menusRaw)
      console.log(state, routerData[1].children, routeList)

      // 过滤出与 name 相同的 route 节点
      const currentRoute = routeList.filter(x => x.Url === Url)[0]

      // 获取 面包屑
      if (currentRoute) state.breadcrumb = currentRoute.parent.slice(1).concat(currentRoute)
    }
  },
  actions: {
    updateSystemInfo (context) { // 这里的context和我们使用的$store拥有相同的对象和方法
      this.$ajax(this.$api.system.init.url, {
        method: this.$api.system.init.method
      })
        .then(res => {
          context.commit('init', res)
        })
    }
  }
}