1.vuex基础

1.1 vuex概述

1 问题

2 vuex介绍：更适合用于传递数据，包括大范围传递

1.2 vuex的基本使用

1. 使用步骤

2、创建vuex项目

选择目录

2 创建目录

3 选择手动配置

4 选择依赖

3、创建成功之后，默认有store.js文件

4、main文件

1.3 初始化计数器项目的基本结构

1. 运行

2、app界面修改，删除之前的所有内容，修改如下：

3、删除HelloWorld

4、减法界面：components/Subtraction.vue

5、加法界面：components/Addition.vue

6、app界面导入俩界面：

7 、效果

8、配置格式的语法处理：末尾分号，单引号（根目录新建.prettierrc）

9、提交本地仓库

1.4 定义并访问全局共享的数据

1 、核心

2、State介绍

3 、定义共享数据count

4、访问count

5、效果

1.5 组件访问state中数据的第二种方式

1、第二种用法

computed:{
    count(){
        return this.$store.state.count;
    }
}

2、减法中使用第二种方式

3、分析

1.6 学习mutation的基本使用

1 、+1操作

2、 Mutation介绍：mutation：变化的意思

commit的内部逻辑

//commit的内部逻辑
function commit(mutationFn){
    mutationFn(this.$store.state) // add(this.$store.state)
}
//调用代码
this.$store.commit('add');

//自己调用
this.$store.mutations.add(this.$store.state)
this.$store.mutations.add1(this.$store.state)

为啥只能通过mutation来操作store的数据呢？

为了统一管理，可以将修改store值的操作，统一在一起，可以方便监控数据的变化
比如：在Addition和Subtracion以及其他很多界面，都是直接修改count的值，那么后期发现count的值有问题，那么我们就需要找很多文件，一个一个文件排查才可能找出问题，不方便监控数据的变化

3、mutation中定义add方法，修改count

4、触发add方法

1.7 在触发mutation的时候携带参数

1、 mutation传参

定义方法时，
- 第一个参数是固定接收state对象，参数名可以改，但是一般都是state
  - 为啥第一个参数固定接收state对象，因为mutations方法就是用于修改state中的数据的，
  - 所以需要有state对象才能修改
- 第二个参数step（自定义），就是我们在调用时传递的第一个参数
commit：调用方法时
- 第一个参数：调用的方法名
- 第二个参数：给调用的方法传递的第一个参数值

2 、定义带参数的mutations方法

3、调用带参数的mutations方法

1.8 触发mutation的第二种方式

1 、mutations第二种用法：映射函数

这里的mapMutations也是固定的名字
mapMutations用于映射mutations方法
与mapState类似，都是一个映射函数，用法也一致
只不过mutations既然是一个函数，那么就在methods中映射
最终效果相当于：

methods: {
    add(state) {
        state.count++
    },
    addN(state, step) {
         state.count += step
    },
}

2、定义sub方法

3 、使用

4、带参数的方法

5、映射带参数的方法

1.9 action的基本使用

1 、先来看一个现象：通过vue调试工具中的第二个窗口，vuex数据窗口

2 、我们来处理一个延迟逻辑

3、 Action介绍

异步操作都定义到actions中
- actions中要操作数据，必须通过commit触发方法来修改
- actions中不能直接修改store的数据，数据只能在mutations中修改
- 异步方法必须有一个参数，context，代表当前store实例对象
  - 因为为了方便通过commit触发mutations方法
触发action
- 通过store实例中的方法dispatch来调用
- dispatch：分发的意思，异步的任务都是通过分发的方式调用的