[JavaScript知识库]vuex---getter

一、用途

当我们需要从store中的state中派生出一些状态

二、定义

getters: {
    //接受如下参数
    //state,
    //getters,
    //rootState,//只在模块中出现
    //rootGetters，//只在模块中出现
    doneTodos(state){
      return state.todos.filter(todo => todo.done)
    }
}

三、访问

//1、通过属性访问
//getter此时是作为 Vue 的响应式系统的一部分缓存其中的
store.getters.doneTodos


//2、通过方法访问（实现给 getter 传参）
//getter此时，每次都会去进行调用，而不会缓存结果
getters: {
  // ...
  getTodoById: (state) => (id) => {
    return state.todos.find(todo => todo.id === id)
  }
}
store.getters.getTodoById(2)

四、利用辅助函数访问getter

//1、字符串数组形式
...mapGetters(namespace?:string, [
    'doneTodosCount',
    'anotherGetter',
])
//2、对象形式
...mapGetters(namespace?:string, {
  // 用来取个名字
  doneCount: 'doneTodosCount'
})
//组件中this.doneCount，相当于store.getters.doneTodosCount