一. 为什么会有 Vuex？
-
在现代 Web 开发复杂多变的需求驱动之下，组件化开发已然成为了事实上的标准。
-
然而大多数场景下的组件都并不是独立存在的，而是相互协作共同构成了一个复杂的业务功能。
- 因此，组件间的通信成为了必不可少的开发需求
二. Vuex 是什么？
-
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化，可以解决不同组件数据共享的问题
-
状态管理模式：在vuex中，所有的变量我们统称为一种 "状态"，也就是管理声明在vuex中的全局变量
-
集中式：将所有的全局变量，都声明在同一个地方
-
可预测：vuex专门提供了一种方式来修改这些状态（全局变量）
三. vuex 初始化功能
- 安装（main.js入口文件夹）
import Vue from "vue";
- 引入
import Vuex from "vuex";
- 注册(应用)
Vue.use(Vuex);
- 实例化
const store = new Vuex.Store({
// 写配置
})
- 挂载
new Vue({
store,
router,
render: (h) => h(App),
}).$mount("#app");
四. state
1. 概念
- 大白话：专门用来声明全局变量的地方
- 专业术语：state是防止所有公共状态的属性，如果你有一个公共状态数据，你只需要定义在state对象中
2. 基本使用
- 语法：$store.state.定义在state里面的变量名
3. 优化使用
4. 辅助函数
- 通过拓展运算符把辅助函数的返回值结构到计算属性中，从而获取state中的变量count
5、使用场景
- 当一个变量需要在多个vue文件中使用时，那么这个变量久可以声明在state中，让它成为一个全局变量
五. mutations
1. 概念
- 大白话：mutations是专门用来修改state中的变量的对象(属性)
- 专业术语：state数据的修改只能通过mutations，并且必须是同步更新(也就是里面不能有异步代码)，目的是形成数据快照
2. 基本使用
- 语法：$store.commit('需要调用的函数'，传给调用函数的值)
3. 优化使用
4. 辅助函数
5. 使用场景
- 当我们需要修改state中变量的值的时候，此刻需要用到mutations
- 注意：mutations只能同步修改
六. actions
1. 概念
- 大白话：actions就是可以通过异步操作，调用mutations中的函数，从而修改state中的变量
- 专业术语：state是存放数据的，mutations是同步更新数据，actions则辅助进行异步操作
2. 基本使用
- 语法："$store.dispatch('调用的函数名', 传递给函数的值)
3. 优化使用
4. 辅助函数
5. 使用场景
- 当我们需要修改state中变量的值的时候，此刻需要用到actions
- 注意：actions异步的时候才需要用到
七. getters
1. 概念
- 大白话：除了state可以声明全局变量之外，还可以利用getters声明全局变量，只不过getters声明的变量是从state派生出来的，getters就相当于vue中的computed计算属性
- 专业话术：除了state之外，有时我们还需要从state中派生出一些状态，这些状态依赖state，此时会用到getters
2. 基本使用
3. 优化使用
4. 辅助函数
5. 使用场景
八. module
1. 概念
-
大白话：分模块来管理我们的全局变量，这样做有利于项目的后期维护
-
专业术语：由于单一状态树，应用的所有状态会集中在一个比较大的state对象中，当应用变的复杂的时候，代码就变的相当臃肿了，vuex会变的越来越难维护，因此就有了vuex的模块化
2. 基本使用
3 .利用getters简化模块中变量的使用
4. 默认情况下：模块中mutations，actions，getters中声明的变量都是挂载到全局命名空间的
5. 辅助函数
- 默认情况下每个模块中的mutations，actions，getters，声明的变量或者函数都是全局命名空间的，因此不具备封闭性(不具备独立空间)，如果想要让每个模块都具有独立的命名空间，则需要给模块添加namespaced属性且值为true，此刻模块中的mutations，actions，getters，声明的变量或者函数都成为局部的变量或函数（相当于给模块添加了一道锁），访问他们的时候必须添加模块名才可以访问成功。
