跟着文档学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官方文档

推荐阅读更多精彩内容

  • Vuex是什么? Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件...
    萧玄辞阅读 1,984评论 0 6
  • 安装 npm npm install vuex --save 在一个模块化的打包系统中,您必须显式地通过Vue.u...
    萧玄辞阅读 1,981评论 0 7
  • Vuex 的学习记录 资料参考网址Vuex中文官网Vuex项目结构示例 -- 购物车Vuex 通俗版教程Nuxt....
    流云012阅读 901评论 0 7
  • vuex 场景重现:一个用户在注册页面注册了手机号码,跳转到登录页面也想拿到这个手机号码,你可以通过vue的组件化...
    sunny519111阅读 5,872评论 6 110
  • 对于学习过react的同学可能比较清楚,在react我们是通过redux来处理状态管理的,那么现在火热的vue是如...
    我是上帝可爱多阅读 1,421评论 0 4