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(自定义),就是我们在调用时传递的第一个参数
- 第一个参数是固定接收state对象,参数名可以改,但是一般都是state
- 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:分发的意思,异步的任务都是通过分发的方式调用的