一、vuex 概述

1. 是什么

    vuex 是一个 vue 的状态管理工具，状态就是数据

    大白话：vuex 是一个插件，可以帮我们管理 vue 通用的数据（多组件共享的数据）

2. 场景

    一份数据在多个组件中使用，并且还可以进行数据修改

3. 优势

    共同维护一份数据，数据集中化管理

    响应式变化

    操作简洁（vuex 提供了一些辅助函数 ）

二、构建 vuex（多组件共享数据）环境

1.  创建一个空仓库

新建 vuex 模块文件

        src / store / index.js  并创建仓库

main.js 导入挂载

2. 核心概念 — state

给仓库提供数据，使用仓库的数据

所有共享的数据都要统一放到 store 中的 state 中存储

提供数据

使用数据

      1.  通过 store 直接访问

                

           

      2.  辅助函数：mapState

           

           

           

 3. 核心概念 — mutations

vuex 同样遵循单向数据流，组件中不能直接修改仓库的数据

state数据的修改只能通过mutations 

携带多个参数 

 练习

辅助函数：mapMutations

mapMutations 和 mapState 很像，把位于mutations中的方法提取出来，映射到组件methods 中

---

3.  核心概念 — actions

处理异步操作（发请求请求回来之后、一秒后）

辅助函数：mapActions

 mapActions 把位于 actions 的方法提取出来，映射到组件methods中

---

4. 核心概念 — getters

类似于计算属性

辅助函数 — mapGetters 

 三、分模块

1.  模块 module（进阶语法）

模块拆分（好维护）

                        在store / index.js 中导入挂载

访问数据

掌握模块中 state 的访问语法

原生：

辅助函数：

---

掌握模块中 getters 的访问语法

 原生

辅助函数

---

掌握模块中 mutations 的调用方法 

掌握模块中 actions 的调用语法