Vuex 4.x —— Getter

https://vuex.vuejs.org/zh/guide/getters.html

  有时候我们需要从store中的state中派生出一些状态，例如对列表进行过滤并计数：

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

  如果有多个组件需要用到此属性，我们要么复制这个函数，或者抽取到一个共享函数然后在多处导入它——无论哪种方式都不是很理想。

  Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。

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

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

一、通过属性访问

  Getter 会暴露为store.getters对象，你可以以属性的形式访问这些值：

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

  Getter 也可以接受其他 getter 作为第二个参数：

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

store.getters.doneTodosCount // -> 1

二、通过方法访问