1. Vuex基础

:::info Vue 应用程序开发的状态管理模式，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 :::

1. store

Vuex中的核心对象，是一个全局唯一的组件数据状态的提供和管理者，也是组件数据状态改变的方法提供者。
Vuex 借助 store 用来管理项目中所有组件的数据以及所有组件的数据变化的模式（特定功能的代码集合就是一种模式），借助 store 对象 来完成组件中数据管理的模式， store 对象 主要完成2件事。 :::success

  1. 通过一个总的 state 对象或函数（一般为对象）集中管理项目中所有组件在页面上呈现出来（渲染出来即呈现）的所有数据。 ::: :::success

  2. 管理项目中任何一个组件在页面上呈现出来的数据的变化（也就是数据状态的变化） :::

    2. store中的各个部分

    :::info actions：提供任何组件完成页面业务功能需要调用的方法的一个对象。actions 中的每一个方法都必须是异步访问后端服务器提供的API。 ::: :::info mutations：接受 actions 对象方法传递过来的数据的对象。mutations 把接收到的数据（新数据即数据状态的改变）传递给 state 。尽管用户通过组件页面可以直接访问到 mutations 的方法，但由于是同步机制而放弃这么做。 ::: :::info state：一个提供所有组件的渲染数据（指响应式数据）的对象或函数（一般为对象）

  3. state 接收到 mutations 的数据变化后，会通知 Vue 组件，进行响应式的更新。

  4. 组件只能读取 state，不能修改。 ::: :::info getters：提供组件的 获取 响应式 state 数据 的对象。 :::

    完整配合过程：用户在组件渲染后的页面发出请求， 组件通过 store. dispatch 访问 到 actions 方法的异步方法，然后异步访问后端服务器提供的 API，后端服务器把从数据表中取出来的数据返回给 actions的方法后，actions 再 commit (提交）给 mutations 对象中的对应的方法，mutations 对象中的该方法 把数据传递给 响应式 的 state, 通知 Vue 组件，响应式的更新页面。

2. Vuex架构

Vuex4 源码架构 :::info Store 类
属性:
moduleCollection ——模块集合对象
_modulesNamespaceMap ——模块和命名空间映射
dispatch ——访问 actions 异步方法的函数类型的属性
commit ——访问 mutations 方法的函数类型的属性
state —— 一个提供所有组件的渲染数据（指响应式数据）的对象或函数（一般为对象）
_state —— state 响应式数据的备份
方法：
commit —— 一个可以访问 mutations 对象中方法的方法
dispatch_——一个可以访问 actions 对象中方法的方法
reactiveState ——把根模块中的 state 变成响应式 state 的方法
install ——app.use(store)（store 中间件挂载到app上）时需要调用的方法 ::: :::info useStore 函数
一个可以把挂载到 app 的 store 对象 inject 出来（inject 就是注入，从别的地方拿到对象的意思） ::: :::info createStore 函数
一个创建 store类对象的函数 :::

:::info ModuleCollection：封装和管理所有模块的类，类成员：
属性：

  1. root——根模块属性

方法：

  1. register——注册根模块和子模块的方法 【注册就是添加】
  2. getNameSpace——循环递归获取命名空间方法

  3. getChild——获取子模块方法 ::: :::info ModuleWrapper：封装和管理某一个模块的类，主要成员有:
    属性：

  4. children ——保存当前模块下子模块

  5. rawModule ——保存当前模块的属性
  6. state —— 保存当前模块的 state 的属性
  7. namespaced —— 判断 当前模块是否有命名空间的属性
  8. context —— 一个可以向 actions 丶mutations 中的方法参数 传递 state,commit,dispatch 值的对象，此对象 类型为 ActionContext

方法：

  1. addChild —— 添加子模块到当前模块中
  2. getChild —— 获取子模块
  3. forEachMutation —— 当 注册当前模块 mutations 到 store 时，把 模块的 mutations 对象中所有方法 解析 成 方法名到方法的映射这一部分功能。
  4. forEachAction —— 当 注册当前模块 actions 到 store 时，把 模块的actions 对象中所有方法 解析 成 方法名到方法的映射这一部分功能。
  5. forEachGetter —— 当注册当前模块 getters 到 store 时，把 模块的 getters 对象中所有方法 解析 成 方法名到方法的映射这一部分功能。

forEachChild —— 在完成子模块 mutation丶actions丶getters 到 store 的注册之前，把所有的子模块 解析成 模块名到模块的映射这一部分功能 :::

:::info installModule 方法：此方法为模块注册方法
初始化根模块,递归注册所有子模块，收集此内的所有模块 getter，mutations，actions方法
就是把根模块和子模块 state 对象中的数据 和 mutations,actions,getters 对象中 方法全部收集到 store 对象中，installModule 主要完成 ：

  1. 判断所有模块中是否有重复的命名空间
  2. 收集当前模块的 state, 并保存到父级模块的 state 中
  3. 调用 makeLocalContext 方法，创建 ActionContext 类型的对象
  4. 注册当前模块 mutations 到 store
  5. 注册当前模块 actions 到 store
  6. 注册当前模块 getters 到 store
  7. 迭代当前模块下的所有子模块时，并完成子模块 mutation、actions、getters 到 store 的注册 :::

:::info makeLocalContext 方法
此方法生成模块 ActionContext 类型的 对象，对象属性主要包括 dispatch，commit ，state 三部分
方法返回的对象 主要向 actions 、mutations 中的方法参数 传递 state，commit，dispatch 值。 :::