vuex的mapState、mapMutations、mapActions的使用（还有其它）

vuex

vue文件定义的值

mapState

获取vuex中state定义的值

// 使用mapState需引入
import {mapState} from 'vuex'  // 第二种写法需要引入
 computed:{
// 第一种写法 不需要引入辅助函数 mapState  （import {mapState} from 'vuex'）
    list(){
      return this.$store.state.list
    },
    currentIndex(){
      return this.$store.state.currentIndex
    }
   //第二种写法  需要引入辅助函数 mapState  （import {mapState} from 'vuex'）
   ...mapstate(['list','currentIndex'])
  }

mapMutations

调用vuex中mutations定义的方法

// 使用mapMutations需引入
import {mapMutations} from 'vuex'   // 第二种写法需要引入
 methods:{
// 第一种写法  不需要引入辅助函数 mapMutations（import {mapMutations} from 'vuex'）
    handleNav(index){
    this.$store.commit({type:'setIndex',index})
    }
//第二种写法
   ...mapMutations({
   	setIndex:'setIndex'
   })
  }

mapActions

调用vuex中actions定义的方法

// 使用mapActions需引入
import {mapActions} from 'vuex'   // 第二种写法需要引入
 methods:{
// 第一种写法  不需要引入辅助函数 mapActions（import {mapActions} from 'vuex'）
    mounted(){
    	this.$store.dispatch({type:getData"})
    }
   
//第二种写法
   methods:{
	...mapActions(['getData'])
},
mouted(){
	this.getData()
  }