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；
  •