vue复习大法之Vuex

Posted 嘴巴嘟嘟

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue复习大法之Vuex相关的知识,希望对你有一定的参考价值。

Vuex是做什么的

在这里插入图片描述
在这里插入图片描述在这里插入图片描述

单界面的状态管理

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

多界面状态管理

在这里插入图片描述
在这里插入图片描述

小案例

在这里插入图片描述

在这里插入图片描述
挂载到vue实例中
在这里插入图片描述
在这里插入图片描述

使用Vuex的count

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

Vuex核心概念

在这里插入图片描述

state单一状态树

在这里插入图片描述

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作为参数和传递参数

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

Mutation状态更新

在这里插入图片描述
在这里插入图片描述
传递参数
在这里插入图片描述
提交风格
在这里插入图片描述
响应规则
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
常量类型
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

Muations同步函数

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

Action的基本定义

在这里插入图片描述

Action分发

在这里插入图片描述

Action返回的Promise

在这里插入图片描述
在这里插入图片描述

Module

在这里插入图片描述

Module局部状态

在这里插入图片描述

Action的写法

在这里插入图片描述
在这里插入图片描述

以上是关于vue复习大法之Vuex的主要内容,如果未能解决你的问题,请参考以下文章

vue复习大法之生命周期

vue复习大法之小案例品牌管理

vue复习大法之基本使用

VSCode自定义代码片段13——Vue的状态大管家

VSCode自定义代码片段13——Vue的状态大管家

VSCode自定义代码片段13——Vue的状态大管家