Vuex provides a unified tree of states, such as state, that you can use to receive public states with computed attributes in vUE, or you can modify the values that you receive, for example

computed:{
  sex:function(){
      return this.$store.state.sex + 'Add a string. It's a modification.'}}Copy the code

But if your other components want to modify the value in this way, you may have to copy and paste this function into another component.

To solve this problem, Vuex itself provides a way to calculate properties. Getters allows you to derive new states from the store’s state. Of course, if you don’t have multiple components using the state, or each child uses a different derived property, you don’t need to use getters at all.

In fact, the emergence of Vuex is in order to solve the problem of communication between the components, if your operation or data does not involve the public operation, only a single component operations, please do not store the status value or function to the Vuex, because Vuex would make their own mount on all components, whether or not the current component using the contents, So this actually definitely adds to the performance drain, yes, because you can’t guarantee that every child component will use the same state, unless it’s a special state like routing, which doesn’t need to be managed by VuEX, as discussed in the VuE-Router series.

getters

Vuex allows us to define “getters” (you can think of them as computed properties of the store) in the store. Just like evaluating properties, the return value of a getter is cached based on its dependency and is recalculated only if its dependency value changes. In other words, computed in VUE, if you know computed, you can use Getters just like computed, but there are some differences.

state.js

    let state = {
      from: 'china',
      arr: [2.3.1.4.6]
    }
    export default state
    
   getters.js
   
    // The first argument is state
    let address = (state) => {
      return 'nationality: + state.from
    }
    // The second argument accesses getters
    let addressMore = (state, getters) => {
      return 'Other Descriptions' + getters.address
    }
    // return a function that takes arguments and returns a specific value
    // In this case, the method is used to check if a value exists in the arR array in state
    let findArr = (state) => (number) => {
      let ifExit = state.arr.find((n) => n === number) // arr.find is an extension of the ES6 syntax for arrays
      if (typeof (ifExit) === 'undefined') {
        return false
      } else {
        return true
      }
    }
    export {address, addressMore, findArr}
Copy the code

For information on how getters is used, take a look at the comments in the code above, and I’ll focus on the difference between Getters and computed, which is the third use above.

One disadvantage of computed is that you can’t pass in parameters. If you want to determine whether a value exists in an array, you can’t pass a value to computed. Getters doesn’t have this problem. For those of you who struggle with the ES6 syntax, take a look at the simple version below to see what findArr does.

let findArr = function(state){
  // Returns an anonymous function
  return function(number){
    // return n if there are identical ones, undefined if there are none
    let ifExit = state.arr.find(function(n){
      return n===number
    })
    if (typeof (ifExit) === 'undefined') {
      return false
    } else {
      return true}}}Copy the code

Finally, let’s show the effect in the child component

<template>
  <div>
    <div>{{from}}</div>
    <div>{{from2}}</div>
  </div>
</template>
<script>
// import { mapGetters } from 'vuex'
export default {
  computed: {
    from: function () {
      return this.$store.getters.address
    },
    from2: function () {
      return this.$store.getters.addressMore
    }
  },
  created () {
    console.log(this.$store.getters.findArr(2))
    console.log(this.$store.getters.findArr(7))
  }
}
</script>
Copy the code

The results are shown below.

mapGettersAuxiliary function

Teach yourself about the use of auxiliary functions and object expanders.

<template>
  <div>
    <div>{{from}}</div>
    <div>{{from2}}</div>
  </div>
</template>

<script>
    import { mapGetters } from 'vuex'
    export default {
      computed:mapGetters({
          'from': 'address'.'from2': 'addressMore'.'find': 'findArr'
      }),
      created () {
        console.log(this.find(1)) // Because getters is already mounted to the current instance through computed, you don't need to access it through this.$store.getters
        console.log(this.$store.getters.findArr(2))
        console.log(this.$store.getters.findArr(7))
      }
    }
</script>
Copy the code

. mapGetters

<template>
  <div>
    <div>{{from}}</div>
    <div>{{from2}}</div>
  </div>
</template>
 
<script>
import { mapGetters } from 'vuex'
export default{ computed: { ... mapGetters({'from': 'address'.'from2': 'addressMore'.'find': 'findArr'
    })
  },
  created () {
    console.log(this.find(1)) // Because getters is already mounted to the current instance through computed, you don't need to access it through this.$store.getters
    console.log(this.$store.getters.findArr(2))
    console.log(this.$store.getters.findArr(7))
  }
}
</script>
Copy the code

Finally, there are many cases where you don’t need getters, so use them as needed and don’t use getters to manage all derived states of state. Use getters only if you have multiple child components or child pages to use.