介绍
官方解释
Vuex 是一个专为 Vue.js 应用程序开发的 状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
一句话理解
vuex是插件,可以实现 多个组件 间的 数据共享
如:A、B、C 三个组件,共用数据 nickname
,当 A 组件通过 vuex,将 nickname
改成 李雷
,那么 B、C 组件也会显示 李雷
应用场景
多个 组件间 共享数据
大型 vue 项目,才能体现 vuex 的优点;如果是简单项目,反而显得 vuex 复杂。(相当于 运算复杂的天体运动,需要用电脑;计算 1+1 ,用人脑就够了)
中小型 vue 项目,用其他方式也可以实现 数据共享,而且更简单,但功能也会受限
特点
Vuex 的状态存储是 响应式,上图中,一旦修改昵称,右上角的 李雷
立即会改变
组成
组件
普通的组件,不需要额外处理
组件 通过 dispatch()
触发 Actions
中的函数
store
使用时,要先创建 store
对象,将 Actions
、Mutations
、State
定义在 store
对象中
Actions
Actions 内都是 自定义函数
类比:Actions 相当于 Servlet,可以做校验、向后端发送请求等,只能通过 DbUtil 操作数据库
Actions
中的函数,通过调用 commit()
,触发 Mutation
中的函数
注意: 不能操作 State
提示:根据具体情况,也可以 没有 Actions。组件 通过调用 store.commit()
,触发 Mutation
中的函数
Mutations
Mutations 内都是 自定义函数,函数内可 直接操作 State
中的数据
类比:相当于 DbUtil,可直接操作数据库
State
状态,用于存储数据
类比:相当于数据库