【转】vuex 的 mapState、mapGetters、mapActions

mapState、mapGetters、mapActions

不少时候 , $store.state.dialog.show 、$store.dispatch('switch_dialog') 这种写法又长又臭 , 很不方便 , 咱们没使用 vuex 的时候 , 获取一个状态只须要 this.show , 执行一个方法只须要 this.switch_dialog 就好了 , 使用 vuex 使写法变复杂了 ?vue

使用 mapState、mapGetters、mapActions 就不会这么复杂了。vuex

以 mapState 为例 :this

<template>
  <el-dialog :visible.sync="show"></el-dialog>
</template>

<script>
import {mapState} from 'vuex';
export default {
  computed:{

    //这里的三点叫作 : 扩展运算符
    ...mapState({
      show:state=>state.dialog.show
    }),
  }
}
</script>

至关于 :spa

<template>
  <el-dialog :visible.sync="show"></el-dialog>
</template>

<script>
import {mapState} from 'vuex';
export default {
  computed:{
    show(){
        return this.$store.state.dialog.show;
    }
  }
}
</script>

mapGetters、mapActions 和 mapState 相似 , mapGetters 通常也写在 computed 中 , mapActions 通常写在 methods中。code