解決VUEX的mapState/...mapState等取值問題
有木有發(fā)現(xiàn)你頁面的this.$store，一般都正常，但是總有那么幾次，成為你頁面報(bào)錯(cuò)的罪魁禍?zhǔn)?！，那其?shí)除了和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 適用于獲取值，不會(huì)改變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>
弱弱的問問看官，你腳的這個(gè)this.$store煩不煩，這要是有十個(gè)值，甚至要看到整整齊齊的十個(gè)this.$store…唉呀，真可怕，這時(shí)候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 {
// }
//}
// 對你沒有看錯(cuò)哦，不用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()
// 就相當(dāng)于this.$store.commit('updateLoading')
methods: {
...mapMutations([
'updateLoading'
]),
}
}
其實(shí)最好采用computed的方式取值，這樣會(huì)避免很多問題的發(fā)生，特別是數(shù)據(jù)更新不及時(shí)~
補(bǔ)充知識：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']) }
以上這篇解決VUEX的mapState/...mapState等取值問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue中監(jiān)聽input框獲取焦點(diǎn)及失去焦點(diǎn)的問題
這篇文章主要介紹了vue中監(jiān)聽input框獲取焦點(diǎn)，失去焦點(diǎn)的問題,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-07-07
vite2.x實(shí)現(xiàn)按需加載ant-design-vue@next組件的方法
這篇文章主要介紹了vite2.x實(shí)現(xiàn)按需加載ant-design-vue@next組件的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
Vue如何實(shí)現(xiàn)分頁功能代碼實(shí)例
這篇文章主要給大家介紹了關(guān)于Vue如何實(shí)現(xiàn)分頁功能的相關(guān)資料,Vue分頁功能的實(shí)現(xiàn)需要前端和后端共同配合完成,文中通過代碼實(shí)例介紹的非常詳細(xì),需要的朋友可以參考下2023-09-09
解決removeEventListener 無法清除監(jiān)聽的問題
這篇文章主要介紹了解決removeEventListener 無法清除監(jiān)聽的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要介紹了iview Upload組件多個(gè)文件上傳的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
通過Element ui往頁面上加一個(gè)分頁導(dǎo)航條的方法
這篇文章主要介紹了通過Element ui往頁面上加一個(gè)分頁導(dǎo)航條的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
為什么vue等的這些mvvm框架比傳統(tǒng)的操作dom渲染頁面要快,下面這篇文章主要給大家介紹了關(guān)于虛擬DOM與diff算法的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04
vue引入新版 vue-awesome-swiper插件填坑問題
這篇文章主要介紹了vue引入新版 vue-awesome-swiper插件填坑問題，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01
vue-video-player實(shí)現(xiàn)實(shí)時(shí)視頻播放方式(監(jiān)控設(shè)備-rtmp流)
這篇文章主要介紹了vue-video-player實(shí)現(xiàn)實(shí)時(shí)視頻播放方式(監(jiān)控設(shè)備-rtmp流)，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
使用Mockjs模擬接口實(shí)現(xiàn)增刪改查、分頁及多條件查詢
Mock.js是一個(gè)模擬數(shù)據(jù)生成器,可以讓前端獨(dú)立于后端進(jìn)行開發(fā),下面這篇文章主要給大家介紹了關(guān)于使用Mockjs模擬接口實(shí)現(xiàn)增刪改查、分頁及多條件查詢的相關(guān)資料,需要的朋友可以參考下2022-04-04