当前位置:首页 >> 网络编程

解决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里一模一样哦~
 // <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() 
 // 就相当于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等取值问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。