In the previous chapter, we talked about state. If state corresponds to data in VUE, then getters is equivalent to computed in VUE. In this chapter, we will take a detailed look at getters attributes of VUEX.

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 also want to use this way of transformation to transform the value, then you may have to copy and paste the function to other component, of course, in order to solve this problem, vuex itself to provide the similar to calculate properties, getters can let you from the state of the store to derive some new status, such as, of course Fruit not multiple components used to this state, or each child components used in derived attribute is different, so, you can need not getters completely. (here say, more 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 don’t put these states Stored in value or function vuex because vuex will get on their own mount to all components, whether or not the current component using the contents, so it certainly increases the performance of the loss, in fact, pay attention to is for sure, because it is hard to ensure that every child components use the same state, unless it’s routing such special status, of course also routing It does not need to be managed by VUex, which will be covered in the vuE-Router series.

1.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
Copy the code
// 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 details on how getters is used, take a look at the comments in the code above. Here I’m going to focus on the difference between Getters and computed, which is the third use above. I’ll talk about computed later in the vUE Advanced series. Filters the limitations of the two data processing tools. If you are interested, you can also click on the link below:

Limitations of two data processing tools, computed and filters

One of the disadvantages of computed data is that you can’t pass in parameters, so if you want to find out if there’s a value in an array, you can’t pass in a value in computed data, and that’s a pain in the arse, but you can do it in some special way, and I won’t expand it here, but you can leave a comment if you’re interested. Getters doesn’t have that problem. For those of you who struggle with ES6 syntax, check out 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 result is as follows:

2. MapGetters auxiliary function

I’ve covered the use of helper functions and object expanders in chapter 2 of this series, but if you’re interested, check out the following article.

Vuex (2) — state,mapState… MapState object expansion

<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

3. …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

Use getters as needed. Don’t use getters to manage all derived states of state. Use getters only if you have more than one child component or child page.

Never forget why you started, and your mission can be accomplished.

You can also scan the QR code to enter the blogger’s fan group (708637831). Of course, you can also scan the QR code to reward and directly keep a handsome blogger.