介绍
官方解释
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 中的函数,通过调用 commit() ,触发 Mutation 中的函数
注意: 不能操作 State
提示:根据具体情况,也可以 没有 Actions。组件 通过调用 store.commit() ,触发 Mutation 中的函数
Mutations
Mutations 内都是 自定义函数,函数内可 直接操作 State 中的数据
应用场景:通常用在登录,Actions 向后端发送请求,登录成功后,将用户信息保存到 State 中
State
状态,用于存储数据
类比:相当于数据库

