这篇文章主要讲解了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等取值问题的解决方案有进一步的了解,如果还想学习更多内容,欢迎关注亿速云行业资讯频道。
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。