VUEX的mapState/...mapState等取值問題的解決方案

發(fā)布時間：2020-07-27 09:30:45 來源：億速云閱讀：797 作者：小豬欄目：開發(fā)技術(shù)

這篇文章主要講解了VUEX的mapState/...mapState等取值問題的解決方案，內(nèi)容清晰明了，對此有興趣的小伙伴可以學(xué)習(xí)一下，相信大家閱讀完之后會有幫助。

有木有發(fā)現(xiàn)你頁面的this.$store，一般都正常，但是總有那么幾次，成為你頁面報錯的罪魁禍?zhǔn)祝?，那其實除了和vue的生命周期有關(guān)以外，還跟store取值的方式有關(guān)，下面就說一下新大陸之——mapState mapMutations mapGetters的使用

簡單說一下我對mapState的理解，字面意思就是把store中state 的值遍歷出來，任你取用，就不用寫this.$store.getters.getState.openId等這么長的取值了，同理，mapMutations mapGetters也是把store中對應(yīng)的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,
 // 頭大不復(fù)制了......
 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,
  // 頭大不復(fù)制了......
  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
  // 頭大不復(fù)制了......
  showLoading9: (state) => state.showLoading9
 }
 }
}
</script>

聽說你還不滿意？那看看下面的簡寫吧，別被自己曾經(jīng)的方法蠢哭哦~

// 用之前要先引入vuex中的mapXXX方法
import { mapState } from 'vuex'
export default {
 //data() {
 // return {
 // }
 //}
 // 對你沒有看錯哦，不用data接收了，直接用computed,使用和data里一模一樣哦~
 // <h2 v-if="showLoading0">{{showLoading1}}</h2>
 // 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() 
 // 就相當(dāng)于this.$store.commit('updateLoading')
 methods: {
 ...mapMutations([
   'updateLoading'
  ]),
 }
}

其實最好采用computed的方式取值，這樣會避免很多問題的發(fā)生，特別是數(shù)據(jù)更新不及時~

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

有兩種寫法

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

import { mapState } from 'vuex'

然后在computed中這樣寫：

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

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

import { mapState } from 'vuex'

然后在computed中這樣寫：

computed:

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

看完上述內(nèi)容，是不是對VUEX的mapState/...mapState等取值問題的解決方案有進(jìn)一步的了解，如果還想學(xué)習(xí)更多內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

VUEX的mapState/...mapState等取值問題的解決方案

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽