前端基础学习-利用vuex更新全局面包屑

前端基础学习-利用vuex更新全局面包屑

刚刚接触vuex，简单记录一下vuex的应用

安装vuex

npm install vuex --save

根结构注册store

创建store文件夹
结构如下

这样是为了能引入多个js文件

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

import admin from './modules/admin'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    admin
  }
})

store/modules/admin/index.js

/**
 * The file enables `@/store/index.js` to import all vuex modules
 * in a one-shot manner. There should not be any reason to edit this file.
 */

const files = require.context('./modules', false, /\.js$/)
const modules = {}

files.keys().forEach(key => {
  modules[key.replace(/(\.\/|\.js)/g, '')] = files(key).default
})

export default {
  namespaced: true,
  modules
}

实际用到的js文件

import routerList from '@/router/routerList'

export default {
  namespaced: true,
  state: {
    // 存放面包屑
    breadList: []
  },
  actions: {
    routerBreadcrumbList ({ state, commit, dispatch, rootState }, { paths }) {
      let breadList = []
      // console.log(paths, 'paths1111111111')
      const fullAside = routerList
      // console.log(fullAside, 'fullAside菜单')

      // console.log(breadList, 'breadList')
      // 获取一级面包屑
      if (fullAside) {
        fullAside.forEach(item => {
          if (item.name === paths[0].name) {
            breadList.splice(0, 1, item)
          }
        })
      }
      // console.log(breadList, 'breadList')
      state.breadList = breadList
    }
  },
  mutations: {

  }
}

在主菜单中引入相应的文件

          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item  v-for="(item,index) in breadList" :key="index" :to="{ name: item.path, query: { id: item.id } }">{{item.title}}</el-breadcrumb-item>
          </el-breadcrumb>

<script>
import { mapState, mapActions } from 'vuex'
export default {
  data () {
    return {

    }
  },
  computed: {
    ...mapState('admin/breadCrumb', [
      'breadList'
    ]),
  },
  watch: {
    // 监听路由 控制侧边栏激活状态
    '$route': {
      handler (to, from) {
        this.routerBreadcrumbList({ paths: [ to ] })
      },
      immediate: true
    },
    deep: true
  },

  methods: {
    ...mapActions('admin/breadCrumb', [
      'routerBreadcrumbList'
    ]),
  }
}
</script>

全局vue文件中监听路由变化，引入js文件的routerBreadcrumbList方法，主要是针对拿到的路由与菜单list进行比对，如果值相等，则将其推进面包屑绑定的数组中，然后更新面包屑数组的状态，首页即可看到其更新后的面包屑

这里附上菜单list

// routerList的目的是为了引入对应组件，他们直接没有父子的关系
export default [
  {
    path: 'formLearn',
    name: 'formLearn',
    title: '表单学习',
    component: () => import('@/pages/basic/form/index')
  },
  {
    path: '/basic/form/formValid',
    name: 'formValid',
    title: '表单校验',
    component: () => import('@/pages/basic/form/childPages/formValid')
  },
  {
    path: 'tableLearn',
    name: 'tableLearn',
    title: '表格学习',
    component: () => import('@/pages/basic/table/index')
  },
  {
    path: '/basic/table/tableMockList',
    name: 'tableMockList',
    title: '表格学习',
    component: () => import('@/pages/basic/table/childPages/tableMockList')
  },
  {
    path: '/basic/table/multiTable',
    name: 'multiTable',
    title: '表格操作',
    component: () => import('@/pages/basic/table/childPages/multiTable')
  },
  {
    path: '/basic/table/multiTable/memberDetail',
    name: 'memberDetail',
    title: '人员详情',
    component: () => import('@/pages/basic/table/childPages/memberDetail')
  },
  {
    path: 'others',
    name: 'others',
    title: '其他页面',
    component: () => import('@/pages/basic/others/index')
  },
  {
    path: 'others/register',
    name: 'register',
    title: '注册页面',
    component: () => import('@/pages/basic/others/register/register')
  },
  {
    path: 'appointment',
    name: 'appointment',
    title: '公约',
    component: () => import('@/pages/basic/others/register/components/appointment')
  },
  {
    path: 'test',
    name: 'test',
    title: '测试',
    component: () => import('@/pages/basic/table/index')
  }
]