# 数据控制

el-admin-layout使用Vue.observable来创建响应式的数据控制store，每个store都有getters(获取数据)和mutations(修改数据)两种方法类型。

根据控制的对象不同，store分为app（基础框架）、aside（侧边栏）、header（顶栏）、page（页面）、tagsView（页签栏）五种

使用示例：

import {xxxGetters, xxxMutations} from 'el-admin-layout'

// 通过getters取val
console.log(xxxGetters.val)

// 通过mutations修改val。没有特殊说明的话，mutations都存在和getters中的属性名称相同的修改方法
xxxMutations.val('test')

// 一些mutations可能会有额外的特殊方法
xxxMutations.specialMethod('test')

强烈要求

如果store中的某个数据是引用类型（比如是个数组），那么直接修改也可以触发Vue更新：

//这是个数组[{title: 1}]
const arr = xxxGetters.array

arr[0].title = 2

//[{title: 2}]
console.log(xxxGetters.array)

但是尽量不要这么做，Vue官方文档 (opens new window)中有说明，并且更重要的是，有些mutation不只是简单地修改值，还会有额外的附加操作：

//模拟store
const store = {val: 1}

//这个mutation会将store.val改为 传入的值 * 2
mutations.val(1)

//如果你不清楚这里面的逻辑，而只是把值改成1，那就出大问题了
getters.val = 1

# appStore

这里存放框架的基础数据

import {appGetters, appMutations} from 'el-admin-layout'

# appGetters

名称	说明	类型	默认
isMobile	判断当前是否为移动端，发生resize事件时该值会更新	`boolean`	初始化时根据常量中的`maxMobileWidth`判断
title	标题	`string`	`''`
logo	logo地址	`string`	`''`
logoRoute	点击logo后跳转的路由，会传递给router-link的to (opens new window) 属性	`string`/`object`	`'/'`
onLogoClick	点击logo容器时触发，会替换原有的逻辑	`function(e)`	`undefined`
showLogo	是否显示logo	`boolean`	`true`
activeRootMenu	当前激活的顶部菜单的fullPath	`string`	`''`
menus	所有的树形菜单	`array`	`[]`
loadingMenu	是否正在加载菜单，会让侧边栏菜单和顶栏菜单呈现加载状态	`boolean`	`false`
struct	分层结构	`'top-bottom'`、`'left-right'`	`'left-right'`
navMode	导航模式	`'aside'`、`'head'`、`'mix'`	`'mix'`

自定义渲染方法部分

名称	说明	类型	对应的插槽
logoSlot	自定义渲染logo	`(h, {img, title, props}) => VNode \| VNode[]`	logo

# appMutations

额外方法：

名称	说明	入参
modifyMenuMeta	修改某一个菜单的meta属性	(fullPath: string 菜单的fullPath, meta: MenuItemMeta)

modifyMenuMeta示例

const menus = [{
    fullPath: '/index',
    meta: {title: '首页', icon: 'icon'}
}]

//{title: '首页', icon: 'icon'} -> {title: '修改了', icon: 'icon'}
appMutations.modifyMenuMeta('/index', {title: '修改了'})

//{title: '首页', icon: 'icon'} -> {title: '修改了', icon: undefined}
appMutations.modifyMenuMeta('/index', {title: '修改了', icon: undefined})

WARNING

调用appMutations.isMobile、appMutations.activeRootMenu时，你应该知道你在做什么

# asideStore

这里存放侧边栏的基础数据

import {asideGetters, asideMutations} from 'el-admin-layout'

# asideGetters

名称	说明	类型	默认
show	抽屉模式时的显隐	`boolean`	`false`
theme	主题	`'light'`、`'dark'`、`string`	`'dark'`
uniqueOpen	是否使用手风琴效果	`boolean`	`true`
collapse	是否折叠	`boolean`	`false`
showParentOnCollapse	是否在折叠时显示上级菜单	`boolean`	`false`
showHamburger	是否显示汉堡包	`boolean`	`true`
autoHide	是否自动隐藏	`boolean`	`false`
alwaysRender	是否在没有菜单时也渲染侧边栏	`boolean`	`false`
postMenus	在侧边栏渲染前对菜单数据进行修改的函数，需要返回修改后的菜单数组！	`(menus) => array`	`null`
inlineIndent	子菜单的单位缩进距离	`number`	`26`
switchTransitionName	侧边栏菜单变化时的过渡动画名称	`string`	`'sidebar'`
defaultOpeneds	默认展开的菜单的fullPath数组	`string[]`	`[]`

自定义渲染方法部分

名称	说明	类型	对应的插槽
defaultSlot	自定义渲染侧边栏内容	`(h) => VNode`	aside
headerSlot	自定义渲染侧边栏头部内容	`(h, logo) => VNode \| VNode[]`	aside-header
footerSlot	自定义渲染侧边栏底部内容	`(h, hamburger) => VNode \| VNode[]`	aside-footer
menuIconSlot	自定义渲染菜单图标	`(h, {menu, depth}) => VNode`	aside-menu-icon
menuContentSlot	自定义渲染菜单内容	`(h, {menu, depth}) => VNode`	aside-menu-content

注意

postMenus中如果使用了其他响应式的数据，那么侧边栏会在数据变化时重新渲染！

这可能会在菜单数据量较大时导致性能问题

# asideMutations

额外方法：

名称	说明	入参
open	移动端或设置了侧边栏自动隐藏时打开抽屉，否则展开	-
close	移动端或设置了侧边栏自动隐藏时关闭抽屉，否则折叠	-
switch	切换侧边栏的状态，open和close的聚合方法	`(action: string)`，'open'或'close'，为其他值时会把侧边栏改为相反的状态)

# headerStore

这里存放顶栏的基础数据

import {headerGetters, headerMutations} from 'el-admin-layout'

# headerGetters

名称	说明	类型	默认
theme	主题	`'light'`、`'dark'`、`string`	`'light'`
showCollapseIcon	是否显示第一级水平菜单的展开折叠箭头	`boolean`	`false`
avatar	头像地址	`string`	-
username	用户名称	`string`	-
dropdownItems	自定义下拉菜单项	`DropdownItem[]`	`[]`

自定义渲染方法部分

名称	说明	类型	对应的插槽
dropdownItemsSlot	自定义渲染下拉菜单项	`(h) => VNode[]`	header-dropdown-items
leftSlot	自定义渲染左侧内容	`(h, [logo, hamburger]) => VNode \| VNode[]`	header-left
centerSlot	自定义渲染中部内容	`(h, [headMenu]) => VNode \| VNode[]`	header-center
rightSlot	自定义渲染右侧内容	`(h, [refreshBtn, dropdown]) => VNode \| VNode[]`	header-right
menuIconSlot	自定义渲染菜单图标	`(h, {menu, depth}) => VNode`	header-menu-icon
menuContentSlot	自定义渲染菜单内容	`(h, {menu, depth}) => VNode`	header-menu-content

DropdownItem类型定义

属性	说明	类型
icon	图标	`string`
content	菜单内容	`string`
handler	点击时触发的方法	`function(e)`

# headerMutations

具备所有方法

# pageStore

这里存放路由页面的基础数据

import {pageGetters, pageMutations} from 'el-admin-layout'

# pageGetters

名称	说明	类型	默认
enableTransition	是否启用过渡动画	`boolean`	`true`
transition	路由过渡动画配置	`Transition`
showIframe	是否显示iframe	`boolean`	`false`
currentIframe	当前iframe的src	`string`	`''`
iframeList	所有iframe的src数组	`array`	`[]`
showHeader	是否显示页头	`boolean`	`true`
showFooter	是否显示页脚	`boolean`	`true`

自定义渲染方法部分

名称	说明	类型	对应的插槽
headerSlot	自定义渲染页头内容	`(h) => VNode \| VNode[]`	page-header
footerSlot	自定义渲染页脚内容	`(h) => VNode \| VNode[]`	page-footer

Transition类型定义

名称	说明	类型	默认
default	当未启用页签栏时的路由动画	`string`	`'el-fade-in'`
next	要访问的tab顺序高于上一个访问的tab时的路由动画	`string`	`'left-out'`
prev	要访问的tab顺序不高于上一个访问的tab时的路由动画	`string`	`'right-out'`
curr	当前使用的路由动画	`string`	`'el-fade-in'`

# pageMutations

额外方法：

名称	说明	入参
addIframe	向iframe数组中添加新的src，会去重	`(src: string)`
delIframe	删除iframe数组指定的src	`(src: string)`
openIframe	显示指定的iframe	`(src: string)`
closeIframe	关闭指定的iframe	`(src: string, del: boolean 是否在关闭后删除该iframe)`

注意

pageMutations.transition会使用Object.assign将传入的值与原始值进行合并！

WARNING

调用pageMutations.showIframe、pageMutations.currentIframe、pageMutations.iframeList时，你应该知道你在做什么

# tagsViewStore

这里存放页签栏的基础数据

import {tagsViewGetters, tagsViewMutations} from 'el-admin-layout'

# tagsViewGetters

名称	说明	类型	默认
enabled	是否启用	`boolean`	`true`
enableCache	是否启用缓存功能	`boolean`	`true`
enableChangeTransition	是否启用根据页签顺序来确定过渡动画的功能	`boolean`	`true`
visitedViews	页签栏中的页签数组	`array`	`[]`
cachedViews	缓存的路由页面key的数组	`string[]`	`[]`

自定义渲染方法部分

名称	说明	类型	对应的插槽
itemSlot	自定义渲染页签	`(h, {key: string, active: boolean, on?: { [k: string]: Function }, title: string, close?: Function}) => VNode`	tags-view-item

# tagsViewMutations

有变动的原始方法：

名称	说明	入参
enabled	停用时会移除所有缓存，并且重置路由过渡动画	`(v: boolean)`
enableCache	停用时会移除所有缓存	`(v: boolean)`
enableChangeTransition	停用时会将pageGetters.transition.curr设为为默认值	`(v: boolean)`

额外方法：

名称	说明	入参
addTagOnly	在页签栏上添加一个页签，没有标题、已存在的不会重复添加	`(v: 页签对象)`
addCacheOnly	加入缓存，当设置了不缓存、已被缓存时调用无效	`(v: 页签对象)`
addTagAndCache	同时调用`addTagOnly`、`addCacheOnly`	`(v: 页签对象)`
delTagOnly	从页签栏中移除一个页签	`(v: 页签对象)`
delCacheOnly	删除对应的缓存	`(v: 页签对象)`
delTagAndCache	同时调用`delTagOnly`、`delCacheOnly`	`(v: 页签对象)`
delOtherTagAndCache	移除其他的非固定页签以及其他的缓存	`(v: 页签对象)`
delAllCache	移除所有缓存
delAllTagAndCache	移除所有非固定页签和所有缓存

WARNING

调用tagsViewMutations.visitedViews、tagsViewMutations.cachedViews时，你应该知道你在做什么

← 插槽内部常量 →