博客

一、getter 定义

• Vuex允许我们在store中定义”getter” ，用于对state中存储的数据进行过滤操作。
• 就像vue生命周期中的computed一样，getter的返回值 会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算

二、使用方法

1、通过属性访问

• Getter 接受 state 作为其第一个参数：

example:现在需要获取list：[1,2,3,4,5,6,7,8,9]中大于5的元素

const store = new Vuex.Store({
   state:{
       list: [1,2,3,4,5,6,7,8,9]
       } ,
    getters: {
        getNumber: state => {
            retrun state.list.filter(item => item > 5)
        }
    }   
})

在.vue中使用

computed:{
    getNumber(){
        return this.$store.getters.getNumber
    }
}

2、通过方法访问

• 同样的数组list 需要根据不同的条件返回不同的数据
• 通过让 getter 返回一个函数，来实现给 getter 传参

const store = new Vuex.Store({
   state:{
       list: [1,2,3,4,5,6,7,8,9]
       } ,
    getters: {
        getNumber: state => (index) => {
            return state.list.filter(item => item > index)
        }
    }   
})

在.vue中使用

computed:{
    getNumber(){
        return this.$store.getters.getNumber(4)
    }
}

3、依赖于已存在的getters

example: 获取list中大于5的数字的个数

注意：如果getters返回的是一个方法，不能用这种方式

const store = new Vuex.Store({
   state:{
       list: [1,2,3,4,5,6,7,8,9]
       } ,
    getters: {
        getNumber: state => {
            return state.list.filter(item => item > 6)
        },
        getNumberLength: (state, getters) = > {
            return getters.getNumber.length
        }
    }   
})

三、mapGetters辅助函数

• mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性：

import { mapGetters } from 'vuex'

export default {
  // ...
  computed: {
  // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // ...
    ])
  }
}

如果你想将一个 getter 属性另取一个名字，使用对象形式：

import { mapGetters } from 'vuex'
export default {
  // ...
  computed: {
    ...mapGetters({
    // 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount`
    doneCount: 'doneTodosCount'
    })
  }
}

四、getters注意事项

• 1、data中定义的属性名称不能和computed中定义的getter名称相同，否则会报错
• 2、vuex中state和getter中可以定义同名属性，互不干扰