跟着文档学Vuex（三）：状态过滤Getters

上一期跟着文档学Vuex（二）：状态读取我们讲到如何将数据储存到vuex并通过computed读取，但是有时候我们需要从store中的state派生出一些状态，例如对列表进行过滤计数

computed: {
  doneTodosCount () {
    return this.$store.state.todos.filter(todo => todo.done).length
  }
}

如果有多个组件都要用到这个函数，我们要么复制这个函数，要么抽取到一个共享函数然后再多处导入，不论哪种方法都不是很理想，这时候getters诞生了，你可以把它认为是store的计算属性，当store里的值变化时，getters会返回重新计算的值
gtters接受state为第一个参数

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
})

那我们怎么拿到getters里返回的值呢

store.getters.doneTodos

getters也可以接受其他getters作为第二个参数

getters: {
  doneTodosCount: (state, getters) => {
    return getters.doneTodos.length
  }
}

我们可以很容易的在组件中使用它

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

同样是用computed属性返回

mapGetters 辅助函数

还记得 mapState 辅助函数吗，他们的用法基本相同

import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters({
      'doneTodsCount',
      'anotherGetter',
       //.....
    })
  }
}

上面是getters里的方法名和你想要的计算属性名字一样时起的名字，如果你想领取名字，使用对象形式

mapGetters({
  doneCount: 'doneTodoCount'
})

这样，一个完整的getters的用法就讲完了，让我们再回顾一下用法，当你需要对state里的数据进行处理时，使用getters，第一个参数是state，第二个参数可以是其他getters，return一个处理好的数据，这样再用 store.getters.xxx调用，也可以用mapGetters帮助我们更快的调用。好，今天这期就到这里，下期我们将讲解更改state中的数据的方法，mutation~

引用

https://vuex.vuejs.org Vuex官方文档