1-15 vux之action

action

action起到通过派发指令给mutation修改state的数据状态的作用。来看例子:

import { mapState,mapGetters,mapMutations,mapActions} from 'vuex'
export default {
  computed:{
	  ...mapState([ 'lesson','room']),
  },
  methods:{
	  ...mapActions(['change_room']),
	  change(){
		  //第一种方法
		 // this.$store.dispatch('change_room','4444')//派发action里面的change_room方法
		  //第二种方法
		  this.change_room('4444')
	  }
  }
}

action.js

export default{//通过dispatch派发异步
	change_room({commit},payload){//1.store解构出commit 2.payload=等于用户传过来的值
		//执行异步的操作 里如ajax或axios
		setTimeout(()=>{
			commit('change_erom',payload) //通过commit唤醒mutations里面的方法将数据更改过来。
		},2000)
	}
	
}

mutations.js

export default{
	//放的commit提交的mutation
	change_erom(state,payload){//1.数据,2传过来的数据
		state.room = payload
	}
	
}

以上步骤就是actions怎么派发mutation来修改state的步骤,多加练习就能掌握。

发布了38 篇原创文章 · 获赞 24 · 访问量 2万+

猜你喜欢

转载自blog.csdn.net/weixin_39162041/article/details/104757883
今日推荐