溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了VUEX的mapState/...mapState等取值問題的解決方案，內容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。
有木有發現你頁面的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里一模一樣哦~
// <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()
// 就相當于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等取值問題的解決方案有進一步的了解，如果還想學習更多內容，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
