vuex的辅助函数的应用

1.引入

import { mapGetters,mapMutations, mapActions } from 'vuex'

2.应用

mapGetters

 computed: {
    // 将store下面的isFooterShow 映射当前组件里的计算属性 isFooterShow
    //  isFooterShow =  $store.getters.isFooterShow
    ...mapGetters(['isFooterShow'])
  }
  页面中的v-show可直接使用isFooterShow

mapMutations

// 将 vuex>store>mutaions 映射到当前组件内的methods
// 以后就可以直接把 addUser当成我们自己的方法使用
methods:{
	...mapMutations(['addUser'])
}
下面的可进行替换
 this.$store.commit('addUser', {
    name: this.userName
 })
 替换为
 this.addUser({
   name: this.userName
  })
//但是这个要注意一个问题，如果methods中的方法和mutations中的方法名相同可能会造成死循环，所以要取个别名，解决方法如下
...mapMutations({
      adduser: 'addUser'
    }),
//这样后台日志打印就正常了就不会进行死循环

mapActions 

...mapActions(['asyncDeluser']),

//mapActions 与 mapMutations的用法相似。都可以直接用
delUser(){
	this.asyncDeluser({id})
}