「这是我参与2022首次更文挑战的第15天，活动详情查看：2022首次更文挑战」

恭祝各位xdm，虎年快乐～工资翻倍！

配置getters对象

// 与state平级，配置getters对象
const getters = {
	bigSum(state){		// getters对象里设置一个处理函数，state作为形参
  	return state.sum*10			// 通过return返回处理后的数据
  }
}

// 在组件中通过vc上的$store中的getters对象，可以获取到处理后的数据
// $store.getters.bigSum就是上面处理后的数据

vuex中的mapState与mapGetters

一个问题：在模板中使用这些数据的时候，都要从vc上的$store中的state或者getters中获取，所以模板中会出现大量$store.state，我们可以通过计算属性computed来解决

{{$store.state.sum}}
{{$store.state.school}}
{{$store.state.student}}

// 用计算属性将上面的代码简化
computed: {
	sum(){
  	return $store.state.sum
  },
  school(){
  	return $store.state.school
  },
  student(){
  	return $store.state.student
  }
}

// 这样模板中就可以写的简单一些
{{sum}}
{{school}}
{{student}}

但是，在计算属性computed节点中也很繁琐，这里就可以采用mapState对计算属性进行简化了

mapState方法：用于帮助我们映射state中的数据为计算属性

// 知识回顾---扩展运算符
// 扩展运算符就是在数组/对象的前面加三个点，相当于把数组/对象拆分成了以逗号分隔的参数序列
let obj = {x: 100, y: 200}
let obj1 = {
	a: 1,
  ...obj,
  b: 2
}
// 上面的代码中，会将obj的一组组key: value拆出来放到obj1中

使用mapState方法

<script>
	// 在组件中引入mapState和mapGetters
	import {mapState, mapGetters} from 'vuex'
	
  export default{
    name: '',
    data(){},
  	computed: {
	  // 使用mapState方法生成计算属性（对象写法）
	  ...mapState({sum: 'sum', schoool: 'school', student: 'student'})
	  
	  // 使用mapState方法生成计算属性（数组写法）
	  // 当计算属性名 和 data中要获取的数据名字相同时，就可以使用数组形式的写法
	  ...mapState(['sum', 'school', 'student'])  
		}
		// mapState({sum: 'sum', schoool: 'school', student: 'student'})
  	// 直接使用mapState函数，里面的参数以键值对的形式，传入属性名和state中对应的数据
  	// mapState处理的结果是一个对象，里面包含了与传入的属性名 对应的函数
  	// 由于computed节点是一个对象，又包裹mapState处理结果的对象，这就造成语法的错误
  	// 所以要使用扩展运算符，把mapState返回的对象拆分成参数序列才能放到computed中
  } 
	
</script>

mapGetters与mapState的使用方法一致

Vuex中的mapActions与mapMutations

与mapState类似，mapMutations是对methods节点内方法的简写

mapMutations用于生成methods节点中的方法，生成的方法中会自动调用commit，提交处理函数到mutations对象

<template>
	<div class="containor">
    <select v-model.number="number">    <!-- 将获取的数据强制转换为number数值型 -->
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="increment(number)">点我+1</button>
    <button @click="decrement(number)">点我-1</button>
    <!-- 使用mapMutations生成事件回调函数，则必须在绑定事件函数的时候传入参数 -->
  </div>
</template>

<script>
	// 在组件中引入mapMutations和mapActions
	import {mapMutations, mapActions} from 'vuex'
  
   export default{
    name: '',
    data(){
    	return {
      	number: 1
      }
    },
    methods: {
      // 组件绕过了dispatch给Actions的过程，直接commit给Mutations
      increment(){			
      	this.$store.commit('increment', this.number)
      },
      decrement(){			
      	this.$store.commit('decrement', this.number)
      }
      
    	// 使用mapMutations生成methods节点中的方法(对象写法)
      // mapMutations函数的形参传入一个对象，key、value分别是methods节点下注册的方法名和提交给mutations对象的方法名
      ...mapMutations({increment: 'increment', decrement: 'decrement'})
     // 注意这种写法没有传递数据this.number，所以要在绑定事件函数的时候传入参数
     
     // 使用mapMutations生成methods节点中的方法(数组写法)
     // 当methods节点下注册的方法名和提交给mutations对象的方法名一致时，可以用数组简写
     ...mapMutations(['increment', 'decrement'])
     
     
    }
   }
</script>

mapActions的用法与mapMutations的用法一致

使用mapActions生成methods节点中的方法，生成的方法会自动调用dispatch，派遣处理函数到actions对象

 methods: {

	incrementOdd(){
  	this.$store.dispatch('incrementOdd',this.number)
	},
	incrementWait(){
  	this.$store.dispatch('incrementWait',this.number)  
	},

	...mapActions({incrementOdd: 'incrementOdd', incrementWait: 'incrementWait'})

	// 使用mapAcions生成methods节点中的方法(数组写法)
  // 当methods节点下注册的方法名和dispatch派遣给actions对象的方法名一致时，可以用数组简写
  ...mapActions(['increment', 'decrement'])
}

// 同理，在绑定事件的时候得把参数写上，因为mapActions生成methods方法时没有传递this.number
<button @click="incrementOdd(number)">奇数时点我+1</button>
<button @click="incrementWait(number)">点我1s后再+1</button>

跋尾

本篇内容就到这里了~ 我是Zeus👩🏻‍🚀来自一个互联网底层组装员，下一篇再见！ 📖