vue复习大法之Vuex(六)

Vuex是做什么的

在这里插入图片描述
vue复习大法之Vuex(六)_第1张图片vue复习大法之Vuex(六)_第2张图片

单界面的状态管理

vue复习大法之Vuex(六)_第3张图片
vue复习大法之Vuex(六)_第4张图片
vue复习大法之Vuex(六)_第5张图片
vue复习大法之Vuex(六)_第6张图片
vue复习大法之Vuex(六)_第7张图片

多界面状态管理

vue复习大法之Vuex(六)_第8张图片
vue复习大法之Vuex(六)_第9张图片

小案例

vue复习大法之Vuex(六)_第10张图片

vue复习大法之Vuex(六)_第11张图片
挂载到vue实例中
在这里插入图片描述
vue复习大法之Vuex(六)_第12张图片

使用Vuex的count

vue复习大法之Vuex(六)_第13张图片
vue复习大法之Vuex(六)_第14张图片
vue复习大法之Vuex(六)_第15张图片

Vuex核心概念

vue复习大法之Vuex(六)_第16张图片

state单一状态树

vue复习大法之Vuex(六)_第17张图片

Getters基本使用

在这里插入图片描述

  getters:{
    greateAgesCount:state=>{
      return state.students.filter(s=>s.age>=20).length
    }
  },
  computed:{
     
    getGreaterAgeCount(){
     
      return this.$store.state.students.fileter(age=>age>=20).length
    }
  }

Getters作为参数和传递参数

在这里插入图片描述

vue复习大法之Vuex(六)_第18张图片

在这里插入图片描述
vue复习大法之Vuex(六)_第19张图片

Mutation状态更新

vue复习大法之Vuex(六)_第20张图片
vue复习大法之Vuex(六)_第21张图片
传递参数
vue复习大法之Vuex(六)_第22张图片
提交风格
vue复习大法之Vuex(六)_第23张图片
响应规则
vue复习大法之Vuex(六)_第24张图片

vue复习大法之Vuex(六)_第25张图片
vue复习大法之Vuex(六)_第26张图片
常量类型
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
vue复习大法之Vuex(六)_第27张图片
vue复习大法之Vuex(六)_第28张图片

Muations同步函数

vue复习大法之Vuex(六)_第29张图片
vue复习大法之Vuex(六)_第30张图片
vue复习大法之Vuex(六)_第31张图片
在这里插入图片描述

Action的基本定义

vue复习大法之Vuex(六)_第32张图片

Action分发

vue复习大法之Vuex(六)_第33张图片

Action返回的Promise

在这里插入图片描述
vue复习大法之Vuex(六)_第34张图片

Module

vue复习大法之Vuex(六)_第35张图片

Module局部状态

vue复习大法之Vuex(六)_第36张图片

Action的写法

vue复习大法之Vuex(六)_第37张图片
vue复习大法之Vuex(六)_第38张图片

你可能感兴趣的:(vue)