vuex 介绍（store、Actions、Mutations、State） 作者：马育民 • 2022-02-27 21:36 • 阅读：10068 # 介绍 ### 官方解释 Vuex 是一个专为 Vue.js 应用程序开发的 **状态管理模式** + **库**。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 ### 一句话理解 vuex是插件，可以实现 **多个组件** 间的 **数据共享** 如：A、B、C 三个组件，共用数据 `nickname`，当 A 组件通过 vuex，将 `nickname` 改成 `李雷` ，那么 B、C 组件也会显示 `李雷` # 应用场景 **多个** 组件间 **共享数据** 大型 vue 项目，才能体现 vuex 的优点；如果是简单项目，反而显得 vuex 复杂。（相当于 运算复杂的天体运动，需要用电脑；计算 1+1 ，用人脑就够了） 中小型 vue 项目，用其他方式也可以实现 数据共享，而且更简单，但功能也会受限 [](https://www.malaoshi.top/upload/pic/vue/Snipaste_2022-03-07_22-38-09.png) # 特点 Vuex 的状态存储是 **响应式**，上图中，一旦修改昵称，右上角的 `李雷` 立即会改变 # 组成 [](https://www.malaoshi.top/upload/pic/vue/Snipaste_2022-03-07_22-23-06.png) ### 组件 普通的组件，不需要额外处理 组件 通过 `dispatch()` 触发 `Actions` 中的函数 ### store 使用时，要先创建 `store` 对象，将 `Actions`、`Mutations` 、`State` 定义在 `store` 对象中 ### Actions Actions 内都是 **自定义函数** **应用场景：**通常用在登录，向后端发送请求 `Actions` 中的函数，通过调用 `commit()` ，触发 `Mutation` 中的函数 **注意：** **不能操作** `State` **提示：**根据具体情况，也可以 **没有 Actions**。**组件** 通过调用 `store.commit()` ，触发 `Mutation` 中的函数 ### Mutations Mutations 内都是 **自定义函数**，函数内可 **直接操作** `State` 中的数据 **应用场景：**通常用在登录，`Actions` 向后端发送请求，登录成功后，将用户信息保存到 `State` 中 ### State 状态，用于存储数据 **类比：**相当于数据库 原文出处：http://malaoshi.top/show_1IX2rA3U4LbW.html