Vue面试题48：你觉得Vuex有什么缺点？（总结自B站up主‘前端杨村长’视频，仅供自用学习）

体验

• 使用模块：用起来比较繁琐，使用模式也不统一，基本上得不到类型系统的任何支持：

const store=createStore({
	modules:{
        a:moduleA
    }
})
store.state.a  //-→要带上moduleA的key，内嵌模块的话会很长，不得不配合mapState使用
store.getters.c  //-→moduleA里的getters，没有namespaced时又变成了全局的
store.getters['a/c']  //-→有namespaced时要加path，使用模式又和state不一样
store.commit('d')  //-→没有namespaced时变成了全局的，能同时触发多个子模块中同名mutation
store.commit('a/d')  //-→有namespaced时要加path，配合mapMutations使用感觉也没简化

思路

• 先夸再贬；
• 使用感受；
• 解决方案；

回答范例

• vuex利用响应式，使用起来已经相当方便快捷了；但是在使用过程中感觉模块化的使用过于复杂，容易出错，还要经常查看文档
• 比如：访问state时要带上模块key，内嵌模块的话会很长，不得不配合mapState使用，模块加不加namespaced区别也很大：如果不加，getters，mutations，actions这些默认是全局，加上之后则必须用字符串类型的path来匹配，使用模式不统一，容易出错；另外Vuex对ts的支持也不友好，在使用模块时没有代码提示；
• 之前Vue2项目中用过vuex-module-decorators的解决方案，虽然类型支持上有所改善，但又要学一套新东西，增加了学习成本；pinia出现之后使用体验好了很多，Vue3+pinia会是更好的组合；

模块化原理

• 下面我们来看看vuex中store.state.x.y这种嵌套的路径是怎么搞出来的：
• 首先是子模块安装过程：父模块状态parentState上面设置了子模块名称moduleName，值为当前模块state对象。放在上面的例子中相当于：store.state[ 'x' ]=modulex.state；此过程是递归的，那么store.state.x.y安装时就是：store.state[ 'x' ][ 'y' ]=moduleY.state；
•