有木有發現你頁面的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的方式取值，這樣會避免很多問題的發生，特別是資料更新不及時~

補充知識：vuex的mapState方法來獲取vuex的state物件中屬性

有兩種寫法

1.首先在元件中引入vuex的mapState方法：

import { mapState } from 'vuex'

然後在computed中這樣寫：

computed:{
  ...mapState({
    save:state => state.save//使用ES6的箭頭函式來給count賦值
  })
}

2.需要先在元件中引入vuex的mapState方法：

import { mapState } from 'vuex'

然後在computed中這樣寫：

computed:

 ...mapState([' save'])
}

以上這篇解決VUEX的mapState/...mapState等取值問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。