Vuex核心内容(二)

今天药忘吃喽~ 2022-10-29 01:46 214阅读 0赞

## 一、Action ##

用于处理异步的数据

如果通过异步操作变更数据，必须通过action，而不能使用mutation，但是在action中还是要通过触发mutation的方式间接变更数据。

**实例**

const store = new Vuex.Store({ 
    	state:{ 
    		count:0
    	},
    	mutations:{ 
    		add(state){ 
    			state.count++
    		}
    	},
    	actions: { 
    	    addAsync(context){ 
    	      setTimeout(()=>{ 
    	        //在 actions 中，不能直接修改 state 中的数据
    	        //必须通过 context.commit() 触发某个 mutation 才行
    	        context.commit('add')  
    	      },1000)
    	    }
    })

> 触发actions的一种方式：this.$store.dispatch(‘xx’)

methods:{ 
    	handle(){ 
    		this.$store.dispatch('addAsync')
    	}
    }

> 触发actions第二种方式：

1.  从vuex中按需要导入mapActions函数 import \{mapActions\} from ‘vuex’
2.  将指定的actions函数映射为当前组件的methods函数

import {  mapActions } from 'vuex'
    methods:{ 
    	...mapActions(['addAsync'])
    	handle(){ 
    		this.addAsync()
    	}
    }

### Action 异步任务时携带参数 ###

mutations:{ 
    	addN(state,step){ 
    		state.count += step
    	}
    },
    actions:{ 
    	addAsyncN(context,step){ 
    		setTimeout(()=>{ 
    			context.commit('addN',step)
    		})
    	}
    }

//触发action第一种方式：
    methods:{ 
    	handle(){ 
    		this.$store.dispatch('addAsyncN',5)
    	}
    }

//触发action的第二种方式：
    methods:{ 
    	...mapActions(['addAsyncN'])
    	handle(){ 
    		this.addAsyncN(5)
    	}
    }

## 二、Getter ##

getter用于store中的数据进行加工处理形成新的数据

1.  getter可以对store中的已有的数据加工处理之后形成新的数据，类似于vue的计算属性
2.  store中数据发生变化，getter的数据也会跟着变化

**实例**

getters:{ 
    	showNum(state){ 
    		return '当前最新的数量是【'+state.count+'】'
    	}
    }

> 使用getters的第一种放式：this.$store.getters.xx

<h3>当前最新的数量为：{
       {this.$store.getters.showNum}}</h3>

> 使用getters的第二种放式：

<h3>当前最新的数量为：{ { showNum}}</h3>
    import {  mapGetters } from 'vuex'
    computed:{ 
    	...mapGetters(['showNum'])
    }