-
体验
- 使用模块:用起来比较繁琐,使用模式也不统一,基本上得不到类型系统的任何支持:
-
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
;