Vue-day-07(vuex基础使用)

1.vuex基础

1.1 vuex概述

1 问题

image.png

• 之前共享数据，是通过以上方式
• 以上方式，只适用于小范围内传递数据

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

image.png

• 没有vuex时：A向B传递数据，需要通过上图中的蓝色剪头来进行一一传递，非常麻烦
• 有vuex时，A直接将要共享的数据，存储到Store中，然后B直接从Store中获取即可，非常简单。

1.2 vuex的基本使用

1. 使用步骤

image.png

image.png

2、创建vuex项目

1. 选择目录

   
   
   image.png
   
   

   2 创建目录

   
   
   image.png
   
   3 选择手动配置
   
   image.png
   
   

   4 选择依赖

   
   
   image.png

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

image.png

• 在这个文件中，导入了vue和vuex
• 并且注册了vuex
• 然后暴露了vuex的store数据
• 大家在创建出来之后，没有store.js，而是store/index.js（跟router一样，版本导致的）

4、main文件

image.png

• 将store对象挂载到了vue中
• 这样所有的vue组件都可以使用store对象

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

1. 运行

image.png

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

image.png

3、删除HelloWorld

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

image.png

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

image.png

6、app界面导入俩界面：

image.png

7 、效果

image.png

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

image.png

9、提交本地仓库

image.png

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

1 、核心

image.png

2、State介绍

image.png

在vue界面中访问count：this.$store.state.count

3 、定义共享数据count

image.png

4、访问count

image.png

• 在template中访问vue实例中的内容时，this可以省略
• 完整写法：{{this.$store.state.count}}

5、效果

image.png

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

1、第二种用法

image.png

mapState是固定写法

• 可以理解为：mapState是state数据映射的函数，通过mapState可以获取state中的数据
• mapState(['state数据1','state数据2'])，将想要获取的state数据，作为参数传递给mapState
• 例如：mapState(['count'])，获取到的就是count数据对应的一个对象{count:f}
• 打印mapState(['count'])，结果如下
  m

image.png

• 这个count是一个function，这个方法会将count的真实数据返回
• 我们只需要对mapState(['count'])进行展开...运算之后，就可以获取到count
• 最终结果：

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

注意：因为count是一个提供数据的函数，所以state里的书写需要映射到computed中，变成一个计算属性

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

image.png

导入mapState之后，就可以使用第二种用法：可以将store共享数据，映射为计算属性

3、 分析

image.png

1.6 学习mutation的基本使用

1 、+1操作

image.png

效果：可以成功，并且没有报错
但是这里我们不能这样处理，需要通过Mutation来修改store的值

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

image.png

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

image.png

这样的话，所有的count修改的逻辑，都定义在mutations中，以后想要知道哪里的逻辑修改了count，就方便找了

4、 触发add方法

image.png

• commit：提交，理解为触发，调用
• commit就是用于调用mutation中的方法

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

1、 mutation传参

image.png

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

2 、定义带参数的mutations方法

image.png

3、 调用带参数的mutations方法

image.png

1.8 触发mutation的第二种方式

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

image.png

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

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

2、 定义sub方法

image.png

3 、使用

image.png

• 通过...mapMutations将sub映射为当前组件方法，所以可以通过this调用sub方法
• 其实这里可以不用定义btnHandler1方法，调用this.sub()
• 直接在-1的按钮上，click事件触发sub即可

4、带参数的方法

image.png

5、 映射带参数的方法

image.png

• 映射有参的函数，和无参的函数是一样的
• 只是调用的时候，传递参数

1.9 action的基本使用

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

image.png

• 点击+1，count为1
• 点击+N，count为4
• 数据是可以通过vue调试工具实时观察的

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

image.png

• 发现点击了+1之后，1s之后界面显示了count为1
• 但是vue调试工具中，count还是为0
• 虽然能够成功，但是调试工具出了问题，所以mutations中不能执行异步操作

3、 Action介绍

image.png

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

4 、异步方法定义

image.png

5、 触发异步方法

image.png

1.10 在触发action的时候携带参数

1、 异步参数

image.png

• 定义异步方法，第二个参数就是要给addN方法传递的参数
• 调用异步方法，第一个参数是调用的方法名，第二个参数是给addNAsync方法传递的参数

2、添加异步参数方法

image.png

3、 Addition方法，添加按钮

image.png

4 、定义方法

image.png

1.11 触发action的第二种方式

1 、Action第二种用法：映射

image.png

• 根state数据，mutations方法的第二种使用一模一样
• 因为action也是方法，所以同mutations一样映射到methods中

2、 定义异步方法

image.png

3、 定义按钮

image.png

4 、导入

image.png

5、 映射，调用

image.png

6、这里映射的subAsync也可以直接使用

image.png

7、带参数的第二种用法

image.png

1.12 介绍getter的使用

1、 getter介绍

image.png

2 、getter使用介绍

image.png

既然getter当属性使用，所以在computed中映射

3 、定义getters方法，并使用

image.png

4、 第二种用法：映射

image.png