Vue 3基础入门 课件 第10章 Vuex组件状态管理.pptxVIP

第10章Vuex组件状态管理

10.1Vuex介绍

官方状态管理方案

Vuex是Vue.js官方状态管理解决方案,通过集中式状态存储和规

范化数据流转构建可维护的应用架构

五大核心特性

单一状态树作为唯一数据源、显式声明状态变更逻辑、封装异步

操作、派生状态计算、模块化组织

单向数据流机制

Stor容器

强制实施View-Actions-Mutations-→State→View的数据流转,

配合开发者工具实现状态快照和时间旅行调试

设计思想来源

借鉴Flux、Redux和TheElmArchitecture的设计思想,专为Vue

3设计,充分利用细粒度数据响应机制

与Pinia的关系

Vue3推荐使用Pinia作为新一代状态管理方案,但Vuex

4仍保持对Vue3的兼容支持

View

2

驱动应用

的数据源

以声明方式将Sta

te映射到视图

3

Actions

View→Actions→

响应用户输入

导致的状态变化

Mutations

Mutations

接收Actions提交,

变更State

State

→State→View

Actions

Vuex的解决方案

多组件共享状态的问题

将共享状态抽取为全局单例管理,

组件树形成巨大视图,任意组件可

获取状态或触发行为

多个视图依赖同一状态时传参繁琐,

嵌套组件层层传递困难,兄弟组件

件间状态同步无力

10.1Vu