解决VUEX的mapState/...mapState等取值问题
有木有发现你页面的this.$store，一般都正常，但是总有那么几次，成为你页面报错的罪魁祸首！，那其实除了和vue的生命周期有关以外，还跟store取值的方式有关，下面就说一下新大陆之——mapStatemapMutationsmapGetters的使用
简单说一下我对mapState的理解，字面意思就是把store中state的值遍历出来，任你取用，就不用写this.$store.getters.getState.openId等这么长的取值了，同理，mapMutationsmapGetters也是把store中对应的mutationsgetters方法遍历出来
下面上代码，看一下具体怎么操作
store.js代码
importVuefrom'vue'
importVuexfrom'vuex'
Vue.use(Vuex)
exportdefaultnewVuex.Store({
state:{
showLoading0:true,
showLoading1:true,
showLoading2:true,
showLoading3:true,
//头大不复制了......
showLoading9:true,
},
//getters适用于获取值，不会改变state原值
getters:{
getStore(state){
returnstate
}
},
//修改state
mutations:{
updateLoading(state,showLoading){
state.showLoading=showLoading
}
},
actions:{
}
})
原来vue中的代码
弱弱的问问看官，你脚的这个this.$store烦不烦，这要是有十个值，甚至要看到整整齐齐的十个this.$store…唉呀，真可怕，这时候mapState的用途就来了，看代码：
听说你还不满意？那看看下面的简写吧，别被自己曾经的方法蠢哭哦~
//用之前要先引入vuex中的mapXXX方法
import{mapState}from'vuex'
exportdefault{
//data(){
//return{
//}
//}
//对你没有看错哦，不用data接收了，直接用computed,使用和data里一模一样哦~
//{{showLoading1}}
//console.log(this.showLoading9)
computed:{
...mapState([
'showLoading0','showLoading1',....,'showLoading9'
])
}
}
mapMutationsmapGetters的使用也是同理
//用之前要先引入vuex中的mapXXX方法
import{mapState}from'vuex'
exportdefault{
//使用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等取值问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。