有木有发现你页面的this.$store，一般都正常，但是总有那么几次，成为你页面报错的罪魁祸首！，那其实除了和vue的生命周期有关以外，还跟store取值的方式有关，下面就说一下新大陆之——mapState mapMutations mapGetters的使用

简单说一下我对mapState的理解，字面意思就是把store中state 的值遍历出来，任你取用，就不用写this.$store.getters.getState.openId等这么长的取值了，同理，mapMutations mapGetters也是把store中对应的mutations getters方法遍历出来
下面上代码，看一下具体怎么操作
store.js代码

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    showLoading0: true,
    showLoading1: true,
    showLoading2: true,
    showLoading3: true,
    // 头大不复制了......
    showLoading9: true,
  },
  // getters 适用于获取值，不会改变state原值
  getters: {
    getStore (state) {
      return state
    }
  },
  // 修改state
  mutations: {
    updateLoading (state, showLoading) {
      state.showLoading = showLoading
    }
  },
  actions: {

  }
})

原来vue中的代码

<script>
export default {
  data() {
    return {
      showLoading0: this.$store.getters.getStore.showLoading0,
      showLoading1: this.$store.getters.getStore.showLoading1,
      showLoading2: this.$store.getters.getStore.showLoading2,
      showLoading3: this.$store.getters.getStore.showLoading3,
      // 头大不复制了......
      showLoading9: this.$store.getters.getStore.showLoading9
    }
  },
  methods: {
    updateLoading() {
      this.$store.commit('updateLoading', false)
    }
  }
}
</script>

弱弱的问问看官，你脚的这个this.$store烦不烦，这要是有十个值，甚至要看到整整齐齐的十个this.$store…唉呀，真可怕，这时候mapState的用途就来了，看代码：

<script>
// 用之前要先引入vuex中的mapXXX方法
import { mapState } from 'vuex'
export default {
  data() {
    return {
      showLoading0: (state) => state.showLoading0
      showLoading1: (state) => state.showLoading1
      showLoading2: (state) => state.showLoading2
      showLoading3: (state) => state.showLoading3
      // 头大不复制了......
      showLoading9: (state) => state.showLoading9
    }
  }
}
</script>

听说你还不满意？那看看下面的简写吧，别被自己曾经的方法蠢哭哦~

// 用之前要先引入vuex中的mapXXX方法
import { mapState } from 'vuex'
export default {
  //data() {
  //  return {
  //  }
  //}
  // 对你没有看错哦，不用data接收了，直接用computed,使用和data里一模一样哦~
  // <h1 v-if="showLoading0">{{showLoading1}}</h1>
  // console.log(this.showLoading9)
  computed: {
    ...mapState([
      'showLoading0','showLoading1',....,'showLoading9'
    ])
  }
}

mapMutations mapGetters的使用也是同理

// 用之前要先引入vuex中的mapXXX方法
import { mapState } from 'vuex'
export default {
  // 使用 this.getStore()
  computed: {
    ...mapGetters([
      'getStore'
    ])
  },
  // 使用this.updateLoading() 
  // 就相当于this.$store.commit('updateLoading')
  methods: {
  	...mapMutations([
         'updateLoading'
     ]),
  }
}

其实最好采用computed的方式取值，这样会避免很多问题的发生，特别是数据更新不及时