Vuex

一:Vuex概述

Vuex概述.png
Vuex统一管理状态的好处.png
一般情况下,只有组件之间共享的数据才需要存在Vuex中.

二:Vuex的基本使用

基本使用.png

2.1核心概念

• State:唯一的公共数据源
• Mutation 修改值的唯一方式 commit
• Action 异步操作
• Getter 进行值的处理

• Module 数据较大时,帮助我们将store进行模块化,每个模块都具有自己单独的state,mutation,action和getter
  2.1.1State

  
  State.png
  

  1.访问state值的第一种方式:

this.$store.state.xxx

2.访问state值的第二种方式

mapstate.png

2.2Mutation
2.2.1第一种触发mutation的方式

Mutation.png 传参.png

2.2.2第二种触发mutation的方式

第二种触发mutation的方式.png

传参:

handle(){
      this.addN(2)
    }

不要在mutation中执行异步操作
2.3Action
2.3.1第一种方式

action使用方法.png
action异步任务携带参数.png
2.3.2第二种方式
image.png
传参:

minusAsync(context,val){
      setTimeout(()=>{
        context.commit('minusN',val);
      },1000)
    }
------------------------------------------------------------------------------------------------
minus2() {
     this.minusAsync(100);
}

2.4Getter

image.png
使用getter的两种方式.png
2.5Module
Module详解

Vuex全系列文章