解决VUEX的mapState/...mapState等取值问题
网络编程 2021-07-04 14:06www.168986.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.mit('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的区别说明
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程