vuex中getters

浅浅的花香味﹌ 2022-02-27 05:54 203阅读 0赞

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'
        }
      },