vuex之mapState、mapGetters、mapMutations、mapActions

我们来一下以下的代码

store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: { //存放状态
    nickname:'Simba',
    age:20,
    gender:'男'
  },
  mutations: {},
  actions: {},
  modules: {}
})

组件代码:

<template>
  <div class="home">
    {{nickname}}
  </div>
</template>
<script>
export default {
  name: 'home',
  computed:{
    nickname(){
      return this.$store.state.nickname
    },
    age(){
      return this.$store.state.age
    },
    gender(){
      return this.$store.state.gender
    }
    
  }
}
</script>

如果说对于vuex里面state所有变量都要这样写，那么代码是多么冗余和繁琐，这时候就用到mapState来解决这个问题

import {mapState} from 'vuex'
export default {
  name: 'home',
  computed: mapState(['nickname','age','gender'])
}

你看这种方法多么简单，记住使用mapState等这种辅助函数时，前面的方法名和获取的属性名是一致的。

mapgetters、mapMutations、mapActions同理，可以简化代码。