vuex中getters

vuex中的getters类似于计算属性computed，对数据池state中的值进行处理

（1）在组件中将值添加到state的personList属性中

<template>
<div>
  <input type="text" v-model="addValue">
  <button @click="add">添加</button>
  <ul>
    <li v-for="(item,index) in newPerson" :key="index">{{index}}：{{item}}</li>
  </ul>
</div>

</template>


    data () {
      return {
        addValue: '',
      }
    },
    computed: {
      ...mapState({
        personList: state => state.personList,
      }),
      //上面的可以简写：
      //...mapState(['personList'])
      newPerson () {
       
        return this.$store.getters.newPerson
      }
    },
    methods: {
      add () {

         console.log(this.$store.getters.newPerson)
        if(this.addValue == ''){
          return
        }
        console.log(this.addValue);
        this.$store.state.personList.push(this.addValue)
        this.addValue = ''
      }
    },

（2）在vuex的getters中对personList的值进行处理，赋给newPerson

  state: {
    login: false,
    name: 'zhu',
    age: 23,
    personList: [],
  },
  getters: {
    newPerson (state) {
      return state.personList.map((item, index) => {
        if(index == 0) {
          return '@@@@' + item
        }else if(index < 3) {
          return '###' + item + '$$$'
        }else {
          return '++' + item + '***'
        }
      })
    }
  },

（3）在组件中通过计算属性computed，来获取newPerson

（4）在标签中v-for对newPerson数组进行遍历

2. mapGetters

mapGetters和mapState用法一样

（1）引入：import { mapState, mapGetters } from 'vuex'

（2）在组件的computed中使用：

    computed: {
      ...mapState({
        personList: state => state.personList,
      }),
      //上面的可以简写：
      //...mapState(['personList'])
      ...mapGetters (['newPerson'])
      // newPerson () {
      //   return this.$store.getters.newPerson
      // }
    },

3. getters中的函数中还有第二个参数“getters”，就是getters本身，它可以调用getters中的其他函数。

  getters: {
    newPerson (state, getters) {
      return state.personList.map((item, index) => {
        if(index == 0) {
          return '@@@@' + item + getters.a
        }else if(index < 3) {
          return '###' + item + '$$$'+ getters.a
        }else {
          return '++' + item + '***'+ getters.a
        }
      })
    },
    a () {
      return '1111'
    }
  },