踩坑记12 vuex4 module 命名空间 | el-menu 文字超范围显示

2021.8.6

坑39（vuex4、module、命名空间）：目标是将原先直接写在store/index.js中的部分与页面布局相关的参数进行模块化集成到store/modules/layout.js中。

文档： Module | Vuex (vuejs.org)

以下是未设置命名空间时（会报warning，见下）：

// layout.js

const state={
    //菜单是否水平收起
    isMenuCollapse:false
}

const mutations={
    SET_IS_MENU_COLLAPSE(state,payload){
        state.isMenuCollapse=payload.isMenuCollapse
    }
}

export default {
    // namespaced:true,
    state,
    mutations
}


// index.js

import { createStore } from 'vuex'
import mutations from './mutations'
import actions from './actions'
import ModuleLayout from './modules/layout'

const state={
    //keep-alive缓存的组件名称
    keepComponents: ['Index'],
    //用户名
    userName:'',
}

const store = createStore({
    state,
    mutations,
    actions,
    modules:{
        layout:ModuleLayout
    }
})

export default store

发现warning提示：

runtime-core.esm-bundler.js:38 [Vue warn]: VNode created with invalid key (NaN). VNode type: ul

  at <ElMenu collapse=undefined collapse-transition=false default-active="/index"  ... >

......

经排查，问题出在collapse=undefined上，而在组件的setup中，传递给collapse的响应式参数isMenuCollapse是这样设置的：isMenuCollapse=store.state.isMenuCollapse，也就是说store.state中并无isMenuCollapse参数，用vue devtools可以查看到isMenuCollapse参数位于store.state.layout下。因此对调用将调用的store.state.isMenuCollapse全部改为 store.state.layout.isMenuCollapse。

为什么？查看文档，关于不使用命名空间时的情况有一些介绍："默认情况下，模块内部的 action 和 mutation 仍然是注册在全局命名空间的——这样使得多个模块能够对同一个 action 或 mutation 作出响应。Getter 同样也默认注册在全局命名空间"。也就是说，无论是否使用命名空间，state都是注册在模块的命名空间下的；namespaced控制的是action、mutation、Getter注册于哪个命名空间。

未使用命名空间，读取state与提交commit：

isMenuCollapse=store.state.layout.isMenuCollapse

store.commit('SET_IS_MENU_COLLAPSE',{
    isMenuCollapse:!state.isMenuCollapse
})

使用命名空间，namespaced:true，读取state与提交commit：

isMenuCollapse=store.state.layout.isMenuCollapse //不变

// 不修改的话会报错： [vuex] unknown mutation type: SET_IS_MENU_COLLAPSE
store.commit('layout/SET_IS_MENU_COLLAPSE',{
    isMenuCollapse:!state.isMenuCollapse
})

坑40（el-menu、collapse、el-aside、文字显示）：问题发现，当折叠菜单时，菜单项title中的文字内容依然显示，超出了el-menu、显示在el-aside，下方提供了滚动条供翻阅。

解决方法一（有时导致样式变化）：使用v-if属性，仅在菜单展开状态下显示文字内容。v-if='!isMenuCollapse'。

解决方法二（推荐）：使用css的overflow属性。设置overflow: hidden。

附：由于菜单项title中使用了图片+文字，并设置了基线对齐，即display: flex和align-items: baseline，当使用解决方法一时，文字不再渲染，图片的位置会跑到顶上。故而建议使用方法二。

坑41【暂未填】（el-menu、collapse、el-aside、折叠动画）：目前将el-menu嵌套在el-aside中的，el-aside的宽度根据菜单的折叠情况，设置为64px或220px。观察实际渲染的菜单元素，折叠到展开其宽度是瞬变；而在展开转变为折叠时，根据el-menu的collapse-transition属性，true（默认）宽度慢慢变小，false瞬变。

于是一开始的目标使el-aside的宽度随el-menu的宽度变化，提升显示效果的动态感。但之后发现el-menu是非原始元素，使用ref或window.getComputedStyle都无法获取其宽度。

附相关参考： Vue获取元素的宽高_meoncih_的博客-CSDN博客_vue获取元素宽度

因此改变目标：对el-aside添加折叠/展开动画，尽量配合el-menu的折叠/展开速度，达成类似效果。动画效果非必要，之后再做。

by 莫得感情踩坑机(限定)