千锋教育前端Vue3.0全套视频教程(Kerwin2023版,Vue.js零基础

Vuex 是 Vue.js 应用中用于集中管理和状态管理的插件。它采用了集中式的方式管理应用的所有组件的状态,并提供了一系列的规则来确保状态的一致性和可预测性。下面是对 Vuex 的知识点进行详细总结和规整:
- 状态管理模式:
- Vuex 使用状态管理模式来管理应用的状态。状态是驱动应用的唯一数据源,包含应用的所有需要共享和响应式更新的数据。
2.State:
state
是 Vuex 存储应用状态的地方,它类似于 Vue 组件中的data
,但是不同于组件的data
,state
是全局共享的,所有组件都可以访问和修改它。
3.Getter:
getter
是用于从state
中派生出一些状态的方法。类似于 Vue 中的计算属性,getter
的返回值会根据依赖缓存起来,只有当依赖发生变化时才会重新计算。
4.Mutation:
mutation
是用于修改state
中的数据的方法。mutation
必须是同步函数,并且是唯一可以修改state
的地方。通常在组件中通过commit
方法调用mutation
。
5.Action:
action
类似于mutation
,但是action
可以包含异步操作,可以在action
中进行数据获取、调用后端接口等异步任务,并最终提交mutation
来修改state
。
6.Module:
module
允许将store
分割成多个模块,每个模块都有自己的state
、getter
、mutation
、action
,从而更好地组织大型的状态管理逻辑。
Vuex 数据流:
- 组件通过
dispatch
调用action
,action
再通过commit
调用mutation
,mutation
修改state
,组件从state
中读取数据。
Vue 组件中使用 Vuex:
- 在 Vue 组件中,可以通过
this.$store
来访问 Vuex 的state
、getter
、mutation
、action
,并通过mapState
、mapGetters
、mapMutations
、mapActions
等辅助函数简化访问和调用。
插件和严格模式:
- Vuex 支持插件机制,可以通过插件来扩展 Vuex 的功能。
- Vuex 支持开启严格模式,通过在创建 Vuex 实例时传入
strict: true
来开启,严格模式下,只能通过mutation
来修改state
,任何通过action
修改state
的行为都会抛出错误