“This is the 15th day of my participation in the First Challenge 2022. For details: First Challenge 2022”

Happy year of the Tiger, XDM!

Configure the getters object

Const getters = {bigSum(state){bigSum(state){const getters = {bigSum(state){bigSum(state); Sum *10 // Return the processed data}} // in the component through the vc $store getters object, $store. Getters. BigSum = $storeCopy the code

MapState and mapGetters in VUEX

One question: When you use this data in a template, you get it from the state or getters in the store on the VC, so you get a lot of state or getters in the store in the template, So there is a lot of store.state in the template, which we can solve by calculating the property computed

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

// Simplify the above code with computed attributes
computed: {
	sum(){
  	return $store.state.sum
  },
  school(){
  	return $store.state.school
  },
  student(){
  	return $store.state.student
  }
}

// The template can be written simply
{{sum}}
{{school}}
{{student}}
Copy the code

However, computing attributes in a computed node is tedious, so you can simplify the calculation by using mapState

MapState method: used to help us map the data in state to computed properties

Let obj = {x: 100, y: 200} let obj1 = {a: 1,... Obj, b: 2} // In the above code, the group key: value of obj will be detached into obj1Copy the code

Use the mapState method

<script>
	// Introduce mapState and mapGetters in the component
	import {mapState, mapGetters} from 'vuex'
	
  export default{
    name: ' '.data(){},
  	computed: {
	  // Use the mapState method to generate calculated attributes.. mapState({sum: 'sum'.schoool: 'school'.student: 'student'})
	  
	  // Use the mapState method to generate the calculated properties.
	  // When the name of the calculated property is the same as the name of the data to be retrieved from data, we can write it as an array. mapState(['sum'.'school'.'student'])}// mapState({sum: 'sum', schoool: 'school', student: 'student'})
  	// Use the mapState function directly, which takes the form of key-value pairs, passing in the attribute name and the corresponding data in state
  	// The result of mapState processing is an object containing the function corresponding to the attribute name passed in
  	// Because a computed node is an object that wraps the resulting object processed by mapState, this causes syntax errors
  	// Therefore, you need to use the extended operator to divide the object returned by mapState into a sequence of parameters to put it in computed
  } 
	
</script>
Copy the code

MapGetters and mapState are used in the same way

MapActions and mapMutations in Vuex

Similar to mapState, mapMutations is a shorthand for methods in nodes

MapMutations is used to generate a method in the methods node, and the generated method will automatically call COMMIT to submit the treatment function to the Mutations object

<template>
	<div class="containor">
    <select v-model.number="number">    <! Cast data to number -->
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="increment(number)">I + 1 point</button>
    <button @click="decrement(number)">I 1 point</button>
    <! Use mapMutations to generate the event callback function, then you must pass in the argument when binding the event function.
  </div>
</template>

<script>
	// Introduce mapMutations and mapActions into the component
	import {mapMutations, mapActions} from 'vuex'
  
   export default{
    name: ' '.data(){
    	return {
      	number: 1}},methods: {
      // The component bypasses dispatch to Actions, and commit to Mutations directly
      increment(){			
      	this.$store.commit('increment'.this.number)
      },
      decrement(){			
      	this.$store.commit('decrement'.this.number)
      }
      
    	// Use mapMutations to generate a method in the methods node
      // The parameters of the mapMutations function are passed in an object. Key and value are the method name registered under the methods node and the method name submitted to the Mutations object, respectively. mapMutations({increment: 'increment'.decrement: 'decrement'})
     // Note that this method does not pass the data this.number, so the argument is passed when the event function is bound
     
     // Use mapMutations to generate methods in the methods node
     // When the method name registered under the methods node is the same as the method name submitted to the mutations object, an array abbreviation can be used. mapMutations(['increment'.'decrement'])}}</script>
Copy the code

The use of mapActions is the same as that of mapMutations

Generate the methods in the Methods node using mapActions, and the generated methods automatically invoke Dispatch, dispatching the handler to the Actions object

 methods: {

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

	// Use mapAcions to generate methods in the methods node.
  // Array abbreviations can be used when the method names registered under the methods node are the same as the method names dispatched to the Actions object by Dispatch. mapActions(['increment'.'decrement'])}// In the same way, you have to write parameters when binding events, because mapActions generated methods without passing this.number
<button @click="incrementOdd(number)"> odd times I +1</button>
<button @click="incrementWait(number)">Dot me 1s and then +1</button>
Copy the code

Postscript tail

This is the end of this article. I am Zeus👩🏻🚀, an Internet low-level assembler. See you in the next article! 📖