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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值