vuex 状态优化

src/assets/scss/_base.scss

}
/* Sidebar switching
/* Sidebar fold
------------------------------ */
.site-sidebar--collapse {
.site-sidebar--fold {
  .site-navbar__header,
  .site-navbar__brand,
  .site-sidebar,

src/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import * as getters from './getters'
import mutations from './mutations'
import * as actions from './actions'
import common from './modules/common'
import user from './modules/user'
Vue.use(Vuex)
const state = {
  // 导航条, 布局风格, defalut(默认) / inverse(反向)
  navbarLayoutType: 'default',
  // 侧边栏, 布局皮肤, light(浅色) / dark(黑色)
  sidebarLayoutSkin: 'dark',
  // 侧边栏, 水平折叠收起状态
  sidebarCollapse: false,
  // 页面文档可视高度(随窗口改变大小)
  documentClientHeight: 0,
  // 菜单导航
  menuNavList: [],
  menuNavActiveName: '1-1',
  // 内容区域tabs标签页
  contentTabs: [],
  contentTabsActiveName: ''
}
export default new Vuex.Store({
  state,
  getters,
  mutations,
  actions,
  modules: {
    common,
    user
  },
  strict: process.env.NODE_ENV !== 'production'

src/store/modules/common.js

export default {
  namespaced: true,
  state: {
    // 页面文档可视高度(随窗口改变大小)
    documentClientHeight: 0,
    // 导航条, 布局风格, defalut(默认) / inverse(反向)
    navbarLayoutType: 'default',
    // 侧边栏, 布局皮肤, light(浅色) / dark(黑色)
    sidebarLayoutSkin: 'dark',
    // 侧边栏, 折叠状态
    sidebarFold: false,
    // 侧边栏, 菜单
    menuList: [],
    menuActiveName: '',
    // 主入口标签页
    mainTabs: [],
    mainTabsActiveName: ''
  },
  mutations: {
    updateDocumentClientHeight (state, height) {
      state.documentClientHeight = height
    },
    updateNavbarLayoutType (state, type) {
      state.navbarLayoutType = type
    },
    updateSidebarLayoutSkin (state, skin) {
      state.sidebarLayoutSkin = skin
    },
    updateSidebarFold (state, fold) {
      state.sidebarFold = fold
    },
    updateMenuList (state, list) {
      state.menuList = list
    },
    updateMenuActiveName (state, name) {
      state.menuActiveName = name
    },
    updateMainTabs (state, tabs) {
      state.mainTabs = tabs
    },
    updateMainTabsActiveName (state, name) {
      state.mainTabsActiveName = name
    }
  }
}

src/store/modules/user.js

import * as types from '../mutation-types'
const state = {
  id: 0,
  name: ''
}
const getters = {
}
const actions = {
}
const mutations = {
  [types.UPDATE_USER_ID] (state, { id }) {
    state.id = id
export default {
  namespaced: true,
  state: {
    id: 0,
    name: ''
  },
  [types.UPDATE_USER_NAME] (state, { name }) {
    state.name = name
  mutations: {
    updateId (state, id) {
      state.id = id
    },
    updateName (state, name) {
      state.name = name
    }
  }
}
export default {
  state,
  getters,
  actions,
  mutations
}

src/store/mutation-types.js

// 公共
export const SET_NAVBAR_LAYOUT_TYPE = 'SET_NAVBAR_LAYOUT_TYPE'
export const SET_SIDEBAR_LAYOUT_SKIN = 'SET_SIDEBAR_LAYOUT_SKIN'
export const SWITCH_SIDEBAR_COLLAPSE = 'SWITCH_SIDEBAR_COLLAPSE'
export const UPDATE_DOCUMENT_CLIENT_HEIGHT = 'UPDATE_DOCUMENT_CLIENT_HEIGHT'
export const UPDATE_MENU_NAV_LIST = 'UPDATE_MENU_NAV_LIST'
export const UPDATE_MENU_NAV_ACTIVE_NAME = 'UPDATE_MENU_NAV_ACTIVE_NAME'
export const ADD_CONTENT_TAB = 'ADD_CONTENT_TAB'
export const UPDATE_CONTENT_TABS = 'UPDATE_CONTENT_TABS'
export const DELETE_CONTENT_TABS = 'DELETE_CONTENT_TABS'
export const UPDATE_CONTENT_TABS_ACTIVE_NAME = 'UPDATE_CONTENT_TABS_ACTIVE_NAME'
// 用户
export const UPDATE_USER_ID = 'UPDATE_USER_ID'
export const UPDATE_USER_NAME = 'UPDATE_USER_NAME'

src/store/mutations.js

import * as types from './mutation-types'
export default {
  [types.SET_NAVBAR_LAYOUT_TYPE] (state, { type }) {
    state.navbarLayoutType = type
  },
  [types.SET_SIDEBAR_LAYOUT_SKIN] (state, { skin }) {
    state.sidebarLayoutSkin = skin
  },
  [types.SWITCH_SIDEBAR_COLLAPSE] (state, { collapse }) {
    state.sidebarCollapse = collapse
  },
  [types.UPDATE_DOCUMENT_CLIENT_HEIGHT] (state, { height }) {
    state.documentClientHeight = height
  },
  [types.UPDATE_MENU_NAV_LIST] (state, list) {
    state.menuNavList = list
  },
  [types.UPDATE_MENU_NAV_ACTIVE_NAME] (state, { name }) {
    state.menuNavActiveName = name
  },
  [types.ADD_CONTENT_TAB] (state, tab) {
    state.contentTabs.push(tab)
  },
  [types.UPDATE_CONTENT_TABS] (state, tabs) {
    state.contentTabs = tabs
  },
  [types.DELETE_CONTENT_TABS] (state) {
    state.contentTabs = []
  },
  [types.UPDATE_CONTENT_TABS_ACTIVE_NAME] (state, { name }) {
    state.contentTabsActiveName = name
  }
}

src/views/main-navbar-update-password.vue

    :append-to-body="true">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
      <el-form-item label="账号">
        <span>{{ $store.state.user.name }}</span>
        <span>{{ userName }}</span>
      </el-form-item>
      <el-form-item label="原密码" prop="password">
        <el-input type="password" v-model="dataForm.password"></el-input>
</template>
<script>
  import { mapMutations } from 'vuex'
  export default {
    data () {
      var validateConfirmPassword = (rule, value, callback) => {
        }
      }
    },
    computed: {
      userName: {
        get () { return this.$store.state.user.name }
      },
      mainTabs: {
        get () { return this.$store.state.common.mainTabs },
        set (val) { this.$store.commit('common/updateMainTabs', val) }
      }
    },
    methods: {
      // 初始化
      init () {
                  onClose: () => {
                    this.visible = false
                    this.$nextTick(() => {
                      this.DELETE_CONTENT_TABS()
                      this.mainTabs = []
                      this.$cookie.delete('token')
                      this.$router.replace({ name: 'login' })
                    })
            })
          }
        })
      },
      ...mapMutations(['DELETE_CONTENT_TABS'])
      }
    }
  }
</script>

src/views/main-navbar.vue

      <el-menu
        class="site-navbar__menu"
        mode="horizontal">
        <el-menu-item class="site-navbar__switch" index="0" @click="switchSidebarCollapseHandle()">
        <el-menu-item class="site-navbar__switch" index="0" @click="sidebarFold = !sidebarFold">
          <icon-svg name="zhedie"></icon-svg>
        </el-menu-item>
      </el-menu>
        <el-menu-item class="site-navbar__avatar" index="3">
          <el-dropdown :show-timeout="0" placement="bottom">
            <span class="el-dropdown-link">
              <img src="~@/assets/img/avatar.png" :alt="$store.state.user.name">
              {{ $store.state.user.name }}
              <img src="~@/assets/img/avatar.png" :alt="userName">{{ userName }}
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="updatePasswordHandle()">修改密码</el-dropdown-item>
<script>
  import UpdatePassword from './main-navbar-update-password'
  import { mapMutations } from 'vuex'
  export default {
    data () {
      return {
      UpdatePassword
    },
    computed: {
      navbarLayoutType: {
        get () { return this.$store.state.common.navbarLayoutType }
      },
      sidebarFold: {
        get () { return this.$store.state.common.sidebarFold },
        set (val) { this.$store.commit('common/updateSidebarFold', val) }
      },
      mainTabs: {
        get () { return this.$store.state.common.mainTabs },
        set (val) { this.$store.commit('common/updateMainTabs', val) }
      },
      userName: {
        get () { return this.$store.state.user.name }
      },
      navbarClasses () {
        let type = this.$store.state.navbarLayoutType
        return [
          !/\S/.test(type) || type === 'default' ? '' : `site-navbar--${type}`
          !/\S/.test(this.navbarLayoutType) || this.navbarLayoutType === 'default' ? '' : `site-navbar--${this.navbarLayoutType}`
        ]
      }
    },
    methods: {
      // 切换侧边栏, 水平折叠收起状态
      switchSidebarCollapseHandle () {
        this.SWITCH_SIDEBAR_COLLAPSE({ collapse: !this.$store.state.sidebarCollapse })
      },
      // 修改密码
      updatePasswordHandle () {
        this.updatePassowrdVisible = true
            data: this.$http.adornData()
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.DELETE_CONTENT_TABS()
              this.mainTabs = []
              this.$cookie.delete('token')
              this.$router.replace({ name: 'login' })
            }
          })
        }).catch(() => {})
      },
      ...mapMutations(['SWITCH_SIDEBAR_COLLAPSE', 'DELETE_CONTENT_TABS'])
      }
    }
  }
</script>

src/views/main-sidebar-sub-menu-nav.vue

<template>
  <el-submenu
    v-if="menuNav.list && menuNav.list.length >= 1"
    :data-idx="menuNav.menuId + ''"
    :index="menuNav.menuId + ''">
    <template slot="title">
      <icon-svg :name="menuNav.icon" class="site-sidebar__menu-icon"></icon-svg>
      <span>{{ menuNav.name }}</span>
    </template>
    <sub-menu-nav
      v-for="item in menuNav.list" 
      :key="item.menuId"
      :menu-nav="item">
    </sub-menu-nav>
  </el-submenu>
  <el-menu-item
    v-else
    :index="menuNav.menuId + ''"
    :data-idx="menuNav.menuId + ''"
    @click="gotoRouteHandle(menuNav.url)">
    <icon-svg :name="menuNav.icon" class="site-sidebar__menu-icon"></icon-svg>
    <span>{{ menuNav.name }}</span>
  </el-menu-item>
</template>
<script>
  import SubMenuNav from './main-sidebar-sub-menu-nav'
  import { getRouteNameByUrl } from '@/utils'
  export default {
    name: 'sub-menu-nav',
    props: {
      menuNav: Object,
      required: true
    },
    components: {
      SubMenuNav
    },
    methods: {
      // 跳转到菜单导航对应路由
      gotoRouteHandle (url) {
        console.log(url)
        var routeName = getRouteNameByUrl(url)
        if (/\S/.test(routeName)) {
          this.$router.push({ name: routeName })
        }
      }
    }
  }
</script>

src/views/main-sidebar-sub-menu.vue

<template>
  <el-submenu
    v-if="menu.list && menu.list.length >= 1"
    :data-idx="menu.menuId + ''"
    :index="menu.menuId + ''">
    <template slot="title">
      <icon-svg :name="menu.icon" class="site-sidebar__menu-icon"></icon-svg>
      <span>{{ menu.name }}</span>
    </template>
    <sub-menu
      v-for="item in menu.list" 
      :key="item.menuId"
      :menu="item">
    </sub-menu>
  </el-submenu>
  <el-menu-item
    v-else
    :index="menu.menuId + ''"
    :data-idx="menu.menuId + ''"
    @click="gotoRouteHandle(menu.url)">
    <icon-svg :name="menu.icon" class="site-sidebar__menu-icon"></icon-svg>
    <span>{{ menu.name }}</span>
  </el-menu-item>
</template>
<script>
  import SubMenu from './main-sidebar-sub-menu'
  import { getRouteNameByUrl } from '@/utils'
  export default {
    name: 'sub-menu',
    props: {
      menu: Object,
      required: true
    },
    components: {
      SubMenu
    },
    methods: {
      // 跳转到菜单对应路由
      gotoRouteHandle (url) {
        var routeName = getRouteNameByUrl(url)
        if (/\S/.test(routeName)) {
          this.$router.push({ name: routeName })
        }
      }
    }
  }
</script>

src/views/main-sidebar.vue

  <aside class="site-sidebar" :class="sidebarClasses">
    <div class="site-sidebar__inner">
      <el-menu
        :default-active="menuNavActiveName"
        :collapse="$store.state.sidebarCollapse"
        :default-active="menuActiveName"
        :collapse="sidebarFold"
        :collapseTransition="false"
        class="site-sidebar__menu">
        <el-menu-item index="1-1" @click="$router.push({ name: 'home' })">
          <icon-svg name="shouye" class="site-sidebar__menu-icon"></icon-svg>
          <span slot="title">首页</span>
        </el-menu-item>
        <sub-menu-nav
          v-for="menuNav in $store.state.menuNavList" 
          :key="menuNav.menuId"
          :menu-nav="menuNav">
        </sub-menu-nav>
        <sub-menu
          v-for="menu in menuList" 
          :key="menu.menuId"
          :menu="menu">
        </sub-menu>
      </el-menu>
    </div>
  </aside>
</template>
<script>
  import SubMenuNav from './main-sidebar-sub-menu-nav'
  import { mapMutations } from 'vuex'
  import SubMenu from './main-sidebar-sub-menu'
  import { getRouteNameByUrl } from '@/utils'
  import isEmpty from 'lodash/isEmpty'
  export default {
      }
    },
    components: {
      SubMenuNav
      SubMenu
    },
    computed: {
      menuNavActiveName: {
      sidebarLayoutSkin: {
        get () { return this.$store.state.common.sidebarLayoutSkin }
      },
      sidebarFold: {
        get () { return this.$store.state.common.sidebarFold }
      },
      menuList: {
        get () { return this.$store.state.common.menuList },
        set (val) { this.$store.commit('common/updateMenuList', val) }
      },
      menuActiveName: {
        get () {
          let name = this.$store.state.menuNavActiveName
          let name = this.$store.state.common.menuActiveName
          return /\S/.test(name) ? name : '1-1'
        },
        set (name) {
          this.UPDATE_MENU_NAV_ACTIVE_NAME({ name })
        }
        set (val) { this.$store.commit('common/updateMenuActiveName', val) }
      },
      mainTabs: {
        get () { return this.$store.state.common.mainTabs },
        set (val) { this.$store.commit('common/updateMainTabs', val) }
      },
      mainTabsActiveName: {
        get () { return this.$store.state.common.mainTabsActiveName },
        set (val) { this.$store.commit('common/updateMainTabsActiveName', val) }
      },
      sidebarClasses () {
        let skin = this.$store.state.sidebarLayoutSkin
        return [
          !/\S/.test(skin) || skin === 'light' ? '' : `site-sidebar--${skin}`
          !/\S/.test(this.sidebarLayoutSkin) || this.sidebarLayoutSkin === 'light' ? '' : `site-sidebar--${this.sidebarLayoutSkin}`
        ]
      }
    },
      $route: 'routeHandle'
    },
    created () {
      this.getMenuNavList().then(() => {
      this.getMenuList().then(() => {
        this.routeHandle(this.$route)
      })
    },
    methods: {
      // 获取菜单导航列表 / 权限
      getMenuNavList () {
      // 获取菜单列表 / 权限
      getMenuList () {
        return this.$http({
          url: this.$http.adornUrl('/sys/menu/nav'),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.UPDATE_MENU_NAV_LIST(data.menuList)
            this.menuList = data.menuList
            sessionStorage.setItem('permissions', JSON.stringify(data.permissions || '[]'))
          } else {
            this.UPDATE_MENU_NAV_LIST([])
            this.menuList = []
            sessionStorage.setItem('permissions', '[]')
          }
        })
      // 路由操作
      routeHandle (route) {
        if (route.meta && route.meta.isTab) {
          var tab = this.$store.state.contentTabs.filter(item => item.name === route.name)[0]
          var tab = this.mainTabs.filter(item => item.name === route.name)[0]
          // tab不存在, 先添加
          if (isEmpty(tab)) {
            var menuNav = this.getMenuNavByRouteName(route.name, this.$store.state.menuNavList)
            if (!isEmpty(menuNav)) {
            var menu = this.getMenuByRouteName(route.name, this.menuList)
            if (!isEmpty(menu)) {
              tab = {
                id: menuNav.menuId,
                id: menu.menuId,
                name: route.name,
                title: menuNav.name,
                title: menu.name,
                type: (window.SITE_CONFIG.nestIframeRouteNameList || []).indexOf(route.name) !== -1 ? 'iframe' : 'module',
                url: menuNav.url
                url: menu.url
              }
              this.ADD_CONTENT_TAB(tab)
              this.mainTabs = this.mainTabs.concat(tab)
            } else {
              return console.error('未能找到可用tab标签页！')
              return console.error('未能找到可用标签页！')
            }
          }
          this.menuNavActiveName = tab.id + ''
          this.UPDATE_CONTENT_TABS_ACTIVE_NAME({ name: route.name })
          this.menuActiveName = tab.id + ''
          this.mainTabsActiveName = route.name
        }
      },
      // 获取菜单导航, 根据路由名称
      getMenuNavByRouteName (name, menuNavList) {
      // 获取菜单, 根据路由名称
      getMenuByRouteName (name, menuList) {
        var temp = []
        for (var i = 0; i < menuNavList.length; i++) {
          if (menuNavList[i].list && menuNavList[i].list.length >= 1) {
            temp = temp.concat(menuNavList[i].list)
          } else if (getRouteNameByUrl(menuNavList[i].url) === name) {
            return menuNavList[i]
        for (var i = 0; i < menuList.length; i++) {
          if (menuList[i].list && menuList[i].list.length >= 1) {
            temp = temp.concat(menuList[i].list)
          } else if (getRouteNameByUrl(menuList[i].url) === name) {
            return menuList[i]
          }
        }
        return temp.length >= 1 ? this.getMenuNavByRouteName(name, temp) : []
      },
      ...mapMutations(['UPDATE_MENU_NAV_LIST', 'UPDATE_MENU_NAV_ACTIVE_NAME', 'ADD_CONTENT_TAB', 'UPDATE_CONTENT_TABS_ACTIVE_NAME'])
        return temp.length >= 1 ? this.getMenuByRouteName(name, temp) : []
      }
    }
  }
</script>

src/views/main.vue

<template>
  <div
    class="site-wrapper"
    :class="{ 'site-sidebar--collapse': this.$store.state.sidebarCollapse }"
    :class="{ 'site-sidebar--fold': sidebarFold }"
    v-loading.fullscreen.lock="loading"
    element-loading-text="拼命加载中">
    <template v-if="!loading">
      <main-navbar />
      <main-sidebar />
      <div class="site-content__wrapper" :style="{ 'min-height': this.$store.state.documentClientHeight + 'px' }">
        <main class="site-content" :class="{ 'site-content--tabs': routeIsTab }">
          <!-- 标签页展示内容 s -->
      <div class="site-content__wrapper" :style="{ 'min-height': documentClientHeight + 'px' }">
        <main class="site-content" :class="{ 'site-content--tabs': $route.meta.isTab }">
          <!-- 主入口标签页 s -->
          <el-tabs
            v-if="routeIsTab"
            v-model="tabActiveName"
            v-if="$route.meta.isTab"
            v-model="mainTabsActiveName"
            :closable="true"
            @tab-click="selectedTabHandle"
            @tab-remove="removeTabHandle">
            <!-- 标签页工具 s -->
            <el-dropdown class="site-tabs__tools" :show-timeout="0">
              <i class="el-icon-arrow-down el-icon--right"></i>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="tabsRefreshCurrentHandle">刷新当前标签页</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <!-- 标签页工具 e -->
            <el-tab-pane
              v-for="item in $store.state.contentTabs"
              v-for="item in mainTabs"
              :key="item.name"
              :label="item.title"
              :name="item.name">
              <el-card :style="siteContentViewHeight">
                <iframe
                  v-if="item.type === 'iframe'"
                  :src="getNestIframeUrl(item.url)"
                  :src="item.url"
                  width="100%" height="100%" frameborder="0" scrolling="yes">
                </iframe>
                <keep-alive v-else>
                  <router-view v-if="item.name === tabActiveName" />
                  <router-view v-if="item.name === mainTabsActiveName" />
                </keep-alive>
              </el-card>
            </el-tab-pane>
          </el-tabs>
          <!-- 标签页展示内容 e -->
          <!-- 主入口标签页 e -->
          <el-card v-else :style="siteContentViewHeight">
            <keep-alive>
              <router-view />
<script>
  import MainNavbar from './main-navbar'
  import MainSidebar from './main-sidebar'
  import { mapMutations } from 'vuex'
  import isEmpty from 'lodash/isEmpty'
  export default {
    data () {
      MainSidebar
    },
    computed: {
      documentClientHeight: {
        get () { return this.$store.state.common.documentClientHeight },
        set (val) { this.$store.commit('common/updateDocumentClientHeight', val) }
      },
      sidebarFold: {
        get () { return this.$store.state.common.sidebarFold }
      },
      menuActiveName: {
        get () { return this.$store.state.common.menuActiveName },
        set (val) { this.$store.commit('common/updateMenuActiveName', val) }
      },
      mainTabs: {
        get () { return this.$store.state.common.mainTabs },
        set (val) { this.$store.commit('common/updateMainTabs', val) }
      },
      mainTabsActiveName: {
        get () { return this.$store.state.common.mainTabsActiveName },
        set (val) { this.$store.commit('common/updateMainTabsActiveName', val) }
      },
      userId: {
        get () { return this.$store.state.user.id },
        set (val) { this.$store.commit('user/updateId', val) }
      },
      userName: {
        get () { return this.$store.state.user.name },
        set (val) { this.$store.commit('user/updateName', val) }
      },
      siteContentViewHeight () {
        var height = this.$store.state.documentClientHeight - 50 - 30 - 2
        if (this.routeIsTab) {
        var height = this.documentClientHeight - 50 - 30 - 2
        if (this.$route.meta.isTab) {
          height -= 40
          return this.$route.meta && this.$route.meta.isIframe ? { height: height + 'px' } : { minHeight: height + 'px' }
          return this.$route.meta.isIframe ? { height: height + 'px' } : { minHeight: height + 'px' }
        }
        return { minHeight: height + 'px' }
      },
      routeIsTab () {
        return this.$route.meta && this.$route.meta.isTab
      },
      tabActiveName: {
        get () {
          return this.$store.state.contentTabsActiveName
        },
        set (name) {
          this.UPDATE_CONTENT_TABS_ACTIVE_NAME({ name })
        }
      }
    },
    watch: {
      '$store.state.contentTabs' (tabs) {
        if (tabs.length <= 0) {
          this.UPDATE_MENU_NAV_ACTIVE_NAME({ name: '' })
          this.$router.push({ name: 'home' })
        }
      }
    },
    created () {
    },
    mounted () {
      this.resetDocumentClientHeight()
      window.onresize = () => {
        this.resetDocumentClientHeight()
      }
    },
    methods: {
      // 重置窗口可视高度
      resetDocumentClientHeight () {
        this.UPDATE_DOCUMENT_CLIENT_HEIGHT({ height: document.documentElement['clientHeight'] })
        this.documentClientHeight = document.documentElement['clientHeight']
        window.onresize = () => {
          this.documentClientHeight = document.documentElement['clientHeight']
        }
      },
      // 获取当前管理员信息
      getUserInfo () {
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.loading = false
            this.DELETE_CONTENT_TABS()
            this.UPDATE_USER_ID({ id: data.user.userId })
            this.UPDATE_USER_NAME({ name: data.user.username })
            this.mainTabs = []
            this.userId = data.user.userId
            this.userName = data.user.username
          }
        })
      },
      // 获取iframe嵌套地址
      getNestIframeUrl (url) {
        return window.SITE_CONFIG.nestIframeUrl + url
      },
      // tabs, 选中tab
      selectedTabHandle (tab) {
        tab = this.$store.state.contentTabs.filter(item => item.name === tab.name)
        tab = this.mainTabs.filter(item => item.name === tab.name)
        if (!isEmpty(tab)) {
          this.$router.push({ name: tab[0].name })
        }
      },
      // tabs, 删除tab
      removeTabHandle (tabName) {
        var newTabs = this.$store.state.contentTabs.filter(item => item.name !== tabName)
        // 当前选中tab被删除
        if (newTabs.length >= 1 && tabName === this.tabActiveName) {
          this.$router.push({ name: newTabs[newTabs.length - 1].name }, () => {
            this.tabActiveName = this.$route.name
          })
        var newTabs = this.mainTabs.filter(item => item.name !== tabName)
        if (newTabs.length <= 0) {
          this.menuActiveName = ''
          this.$router.push({ name: 'home' })
        } else {
          // 当前选中tab被删除
          if (tabName === this.mainTabsActiveName) {
            this.$router.push({ name: newTabs[newTabs.length - 1].name }, () => {
              this.mainTabsActiveName = this.$route.name
            })
          }
          this.mainTabs = newTabs
        }
        this.UPDATE_CONTENT_TABS(newTabs)
      },
      // tabs, 关闭当前
      tabsCloseCurrentHandle () {
        this.removeTabHandle(this.tabActiveName)
        this.removeTabHandle(this.mainTabsActiveName)
      },
      // tabs, 关闭其它
      tabsCloseOtherHandle () {
        this.UPDATE_CONTENT_TABS(this.$store.state.contentTabs.filter(item => item.name === this.tabActiveName))
        this.mainTabs = this.mainTabs.filter(item => item.name === this.mainTabsActiveName)
      },
      // tabs, 关闭全部
      tabsCloseAllHandle () {
        this.DELETE_CONTENT_TABS()
        this.mainTabs = []
        this.menuActiveName = ''
        this.$router.push({ name: 'home' })
      },
      // tabs, 刷新当前
      tabsRefreshCurrentHandle () {
        var tempTabName = this.tabActiveName
        var tempTabName = this.mainTabsActiveName
        this.removeTabHandle(tempTabName)
        this.$nextTick(() => {
          this.$router.push({ name: tempTabName })
        })
      },
      ...mapMutations(['UPDATE_DOCUMENT_CLIENT_HEIGHT', 'UPDATE_USER_ID', 'UPDATE_USER_NAME', 'UPDATE_CONTENT_TABS', 'UPDATE_CONTENT_TABS_ACTIVE_NAME', 'DELETE_CONTENT_TABS', 'UPDATE_MENU_NAV_ACTIVE_NAME'])
      }
    }
  }
</script>

src/views/theme/index.vue

  <el-form>
    <h2>布局设置</h2>
    <el-form-item label="导航条类型">
      <el-radio-group v-model="type">
      <el-radio-group v-model="navbarLayoutType">
        <el-radio label="default" border>default</el-radio>
        <el-radio label="inverse" border>inverse</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="侧边栏皮肤">
      <el-radio-group v-model="skin">
      <el-radio-group v-model="sidebarLayoutSkin">
        <el-radio label="light" border>light</el-radio>
        <el-radio label="dark" border>dark</el-radio>
      </el-radio-group>
</template>
<script>
  import { mapMutations } from 'vuex'
  export default {
    computed: {
      type: {
        get () {
          return this.$store.state.navbarLayoutType
        },
        set (val) {
          this.SET_NAVBAR_LAYOUT_TYPE({ type: val })
        }
      navbarLayoutType: {
        get () { return this.$store.state.common.navbarLayoutType },
        set (val) { this.$store.commit('common/updateNavbarLayoutType', val) }
      },
      skin: {
        get () {
          return this.$store.state.sidebarLayoutSkin
        },
        set (val) {
          this.SET_SIDEBAR_LAYOUT_SKIN({ skin: val })
        }
      sidebarLayoutSkin: {
        get () { return this.$store.state.common.sidebarLayoutSkin },
        set (val) { this.$store.commit('common/updateSidebarLayoutSkin', val) }
      }
    },
    methods: {
      ...mapMutations(['SET_NAVBAR_LAYOUT_TYPE', 'SET_SIDEBAR_LAYOUT_SKIN'])
    }
  }
</script>