解决VUEX的mapState/...mapState等取值问题
编程学习 2021-07-04 14:06www.dzhlxh.cn编程入门
这篇文章主要介绍了解决VUEX的mapState/...mapState等取值问题,具有很好的参考价值,希望对大家有所帮助。一起跟随长沙网络推广过来看看吧
有木有发现你页面的this.$store,一般都正常,但是总有那么几次,成为你页面报错的罪魁祸首!,那其实除了和vue的生命周期有关以外,还跟store取值的方式有关,狼蚁网站SEO优化就说一下新大陆之——mapState mapMutations mapGetters的使用
简单说一下我对mapState的理解,字面意思就是把store中state 的值遍历出来,任你取用,就不用写this.$store.getters.getState.openId等这么长的取值了,同理,mapMutations mapGetters也是把store中对应的mutations getters方法遍历出来
狼蚁网站SEO优化上代码,看一下具体怎么操作
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>
听说你还不满意?那看看狼蚁网站SEO优化的简写吧,别被自己曾经的方法蠢哭哦~
// 用之前要先引入vuex中的mapXXX方法
import { mapState } from 'vuex'
export default {
//data() {
// return {
// }
/ 上一篇:js实现滑动滑块验证登录
下一篇:对vuex中store和$store的区别说明
编程语言
- ThinkPad 笔记本如何调节LCD屏幕亮度
- Dreamweaver制作网页打开特效教程
- Win10 Mobile 10586升级后无限重启怎么办 硬重启帮您
- Win8系统提示音频设备有问题有一个或多个音频服
- Xbox One版Win10首个预览版9月份发布
- 如何在textarea文本输入区内实现换行
- Win10 Build 9901系统更新 预览版新版本下载
- McAfee Framework存在远程格式串处理漏洞
- Win10家庭版今日(7月30)正式在中国官方商城开卖
- Win10 Mobile预览版更新完10536.1000后才收到10536.100
- Win10 RS2更新了什么-Win10 RS2最终版本号1704首曝
- Windows7如何查看回收站对应的文件夹有哪些方法
- Win10让Charms栏回归桌面的方法教程
- 取消Windows XP系统开机启动画面的小技巧
- win8系统怎么下载安装USB百兆网卡?
- XP系统下磁盘空间变少了怎么办?XP系统磁盘空间