在使用前端开发框架 Vue 进行项目开发时，只要涉及到几个模块之间数据和状态的存储、传递、同步和调用，那就少不了需要使用到 Vuex 工具。
Vuex 是什么？
Vuex 是一个专为 Vue.js 应用程序开发的 状态管理模式 + 库。Vuex 管理 Vue 项目的所有组件状态，它采用集中式存储管理应用的所有组件的状态，并以相应的规则控制其变化，其核心是 state。Vuex 作为Vue官方推出的状态管理框架，其具有便捷、简单 API 设计，很好的结合了 Vue 的响应式数据。
Vuex 的应用背景
先来回顾一个知识点：Vue是单向数据流的方式驱动，虽然有类似双向绑定的 v-model 和 .sync语法的存在，但其实他们都是语法糖，使用的方法是人为在子元素绑定事件监控数据变化通知父元素进行更改，数据流动仍然是单向的。
如果应用遇到多个组件模块共享状态数据的时候，单向数据流就需要绑定需要命令来实现数据传递和同步。当多个视图依赖于同一个状态，或者来自不同组件的行为需要更改同一个数据状态，这时候就需要用到 Vuex 进行统一的管理。此外在前端模块化项目中，遇到某些变量需要在全局范围内引用的需求的时候，也可以用 Vuex来解决。
这个状态自管理系统包含以下几个部分：
- 状态，驱动应用的数据源；
- 视图，以声明方式将状态映射到视图；
- 操作，响应在视图上的用户输入导致的状态变化。
vuex 包含哪几部分
-
state：存放状态数据的地方，其中数据是响应式的，数据改变对应组件的数据也会跟新改变，禁止直接改变state中的数据否则数据无法被调试工具监测。State单一状态树，存储的是基本数据。
-
getter: Getter是从State中派生出来的，可理解为属于store的计算属性对State进行加工之后派生出来的数据，和computed的计算属性一样，getter的返回的值会根据它的依赖进行缓存处理，而且只有当它的依赖值发生变化改变的时候才会被重新计算。
-
mutations：装着处理数据逻辑方法的集合体，Mutation是提交修改的数据，从而改变state中数据的方法。通过使用store.commit方法更改state的存储状态，mutation必须是同步函数。
-
actions：提交 mutations，Action 与 mutations 功能类似，但是 Action 提交的是 Mutation 从而修改数据，而不是直接改变状态，还可以包含任何异步操作，一般用于存在异步操作命令的需求中。
-
modules：当store过于臃肿时，可使用modules将store分割成模块，每个模块中都有自己的state、getter、mutations、actions 以及嵌套子模块（从上到下进行同样方式的分割）。
Vuex不限制代码结构，但是规定了一些需要遵守的规则：应用层级的状态需要集中到单个store对象中；提交mutation是更改状态的唯一方法，且该过程是同步的；异步逻辑都应该封装到action里面。
Vuex的项目结构
Vuex的状态存储是响应式的，当Vue组件从store中读取状态时，若store中的状态发生变化，那么相应的组件也会得到高效更新。Vuex是通过全局注入store对象来实现组件之间的状态共享，如果在中大型项目中时，想要实现某个组件改变某个数据，多个组件自动获取更改后的数据来进行业务逻辑处理，这时候就要适用Vuex；如果在项目中只是多个组件间传递数据，没有其他复杂操作，组件间常用通信方式即可，没必要使用Vuex。
