Vue核心技术-54,Vuex-核心概念-Getter

一,前言

上一篇对Vuex-State做了介绍,在对State有一定了解的基础上,Vuex-Getter将会变得很简单
下面就来介绍Vuex-核心概念-Getter

---

二,Vuex-Getter

简单的说,vuex中的getter类似于vue中的computed
和computed一样,getter的返回值也会根据依赖被缓存起来,只有当依赖值发生改变才会重新计算

---

三,Getter的使用

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

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  getters: {
    // Getter接受state作为其第一个参数
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
})

2,Getter还能接受其他getter作为第二个参数：

getters: {
  // 接受其他getter作为第二个参数
  doneTodosCount: (state, getters) => {
    return getters.doneTodos.length
  }
}

---

四,访问getter

1,通过属性访问

Getter会暴露为store.getters对象,以属性形式对其进行访问:

store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }]

可以在任何组件使用:

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

注意:

通过属性访问getter时,会作为Vue响应式系统的一部分缓存其中

2,通过方法访问

通过让getter返回一个函数，实现给getter传参:

getters: {
  // 让getter返回一个函数，实现给getter传参
  getTodoById: (state) => (id) => {
    return state.todos.find(todo => todo.id === id)
  }
}

在对store中的数组进行查询时非常有用:

store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }

注意:

通过方法访问getter不会缓存结果,每次都会进行调用

---

五,mapGetters辅助函数

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

import { mapGetters } from 'vuex'

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

还可使用对象形式,对getter属性重命名:

mapGetters({
  // 将 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount`
  doneCount: 'doneTodosCount'
})

---

六,结尾

以上就是对vuex核心概念getter的介绍,
虽然getter在Vuex的流程图中没有体现,但它也是Vuex核心的一部分
在后续的总结中,将会加入getter重新捋一下vuex的流程图