第10章 Vuex组件状态管理

第10章

Vuex组件状态管理10.1

Vuex介绍官方状态管理方案Vuex是Vue.js官方状态管理解决方案,通过集中式状态存储和规范化数据流转构建可维护的应用架构五大核心特性单一状态树作为唯一数据源、显式声明状态变更逻辑、封装异步操作、派生状态计算、模块化组织单向数据流机制Stor容器强制实施View-Actions-Mutations-→State→View的数据流转,配合开发者工具实现状态快照和时间旅行调试设计思想来源借鉴Flux、Redux和TheElmArchitecture的设计思想,专为Vue3设计,充分利用细粒度数据响应机制与Pinia的关系Vue3推荐使用Pinia作为新一代状态管理方案,但Vuex4仍保持对Vue3的兼容支持View2驱动应用的数据源以声明方式将State映射到视图3ActionsView→Actions→响应用户输入导致的状态变化MutationsMutations接收Actions提交,变更StateState→State→ViewActionsVuex的解决方案多组件共享状态的问题将共享状态抽取为全局单例管理,组件树形成巨大视图,任意组件可获取状态或触发行为多个视图依赖同一状态时传参繁琐,嵌套组件层层传递困难,兄弟组件件间状态同步无力10.1

Vuex介绍10.2Vuex安装包管理器安装独立构建方式使用npm安装:执行'npminstallvuex@next--save'命从GitHub克隆代码仓库到本地使用yam安装:执行yarnaddvuex@next--save'命进入vuex目录,执行yarn安装依赖注意事项:需安装支持Vue3的vuex@next版本,支持Vue2的版本名为Vuex(不带@next)执行yarnbuild构建项目适用于需要使用dev分支最新版本的场景10.3Vuex的核心容器2不可直接修改改变store状态的唯一途径是显式提交mutation,便于跟踪每一个状态的变化响应式状态组件注入Store当Vue3组件从store读取状态时,若状态发生变化,组件会得到高效更新通过app.use(store)安装,组组件中使用this.Sstore访问store实例关键语法createStore(state((.,mutations:(.)app.use(store)this.Smit'type')this.Sstore.statemapState辅助函数直接获取状态在计算属性中返回store.state每当store.state.count变化,计算属性重新计算并触发DOM更新Vuex通过插件系统将store注入所有子组件解决组件获取多个状态时的冗余问题对象写法:"mapState({count:state=>state.count,countAlias:"count"})"数组写法:"mapState("count))])映射同名属性"组件通过this.Sstore访问,无需步频繁导入对象展开运算符:"..mapState(...3混入外部computed对象10.3Vuex的核心容器10.4

Vuex状态获取方法派生状态的需求有时需要从store的state中衍生状态,例如对列表进行过滤并计数,在组件中重复计算会冗余定义Getter函数在store的getters中定义函数,接受state作为第一个参数,也可接受其他getter作为第二个参数,实现getter之间的依赖State→Getter→Component属性访问方式Getter暴露在store.getters对象中,以属性形式访问,组件中使用计算属性访问:this.Sstore.getters.xx10.4Vuex状态获取方法mapGetters辅助函数函数访问将store中的getter映射到局部计算属性数组形式:...mapGetters("doneTodosCount","anotherGetter"])重命名形式:..mapGetters(doneCount:"doneTodosCount"})使用对象展开运算符混入computed对象通过getter返回一个函数,实现给getter传参适用场景:对store中的数组进行查询关键语法:getter返回(state)=>(id)=>的(state)=>(id)=>的柯里化函数调用方式:store.getters.getTodoByld(2)10.5Vuex状态同步更改方法提交Payload定义Mutation对象风格提交通过mit传入额外参数,即载荷;建议载荷使用对象形式;调用方式:mit(increment',10)在mutations中定义,包含type类型和handler回调函数;handler第一个参数是state;handler不能直接调用,需通过mit触发直接使用包含type属性的对象提交;整个对象作为载荷传给mutation函数;调用方式:mittype:"inc-rement,amount:10);handler接收payload对象并读取属性更改store状态的唯一方法是提交mutationTe10.yourmicatehaverangrebitorecomoratic.hadgmdltypenuhcreetateandma10.6Vuex状态异步更改方法ActionvsMutation分发ActionActin提交的是mutation,而非直接变更状态通过store.dispatch(触发:store.dispatch(increment')异步示例:在action内部使用setTimeout执行异步操作后commit组件中使用this.Sstore.dispatch0分发Action可以包含任意异步操作Action函数接受context对象,可调用contextcommit提交mutationmapActions辅助函数将methods映射为dispatch调用支持载荷形式和对象形式分发可通过context.state和context.getters获取状态和派生状态10.6

Vuex状态异步更改方法Promise组合1store.dispatch处理action返回的Promise,调用后仍返回Promise,可链式then处理后续逻辑链式调用在action内部组合其他action,通过dispatch("actionA").then(=>commit..)实现串行执行async/await组合使用async/await语法简化异步组合,先awaitdispatch("actionA),再执行后续commit,代码更清晰直观实际应用场景购物车结账流程:备份购物车→发起AP请求→提交mutation记录状态变更(成功/失败回调)10.7

Vuex状态模块化管理模块局部状态命名空间默认注册在全局命名空间,多模块可响应同一action;mutation和getter的第一个参数是模块局部state;action通过context.state访问局部状态;根节点状态通过context.rootState暴露;getter的第三个参数为rootState添加namespaced:true启用模块命名空间;getter/action/mutation自动加路径前缀;createNamespacedHelpers创建指定命名空间的辅助函数动态注册模块重用store.registerModule(name,module)动态注册模块;store.unregisterMod