从参数化 getter 访问 getter

dr_*_*rto 6 javascript vue.js pinia

太长了;博士

如何从参数化 getter 访问其他 getter?通常,您可以使用this.myGetter; 但是参数化的 getter 是作为箭头函数实现的,其中this是未定义的。在 Pinia 处理此案的首选方式是什么?


我想multiSum在我的 Pinia 商店中创建一个参数化 getter ( ),它访问另一个 getter ( sum)。

getter 可以通过 访问this,但是在用于实现参数化 getter 的箭头函数中不起作用:multiSum崩溃,因为this位于undefined嵌套箭头函数的上下文中。

getters: {
  sum: (state) => state.a + state.b,
  multiSum: (state) => (count) => this.sum * count // crash: this is undefined
}
Run Code Online (Sandbox Code Playgroud)

在 Vuex 中,参数化 getter 可以通过参数而不是 来访问其他 getter this,这也适用于箭头函数。但据我所知,Pinia 中不存在此 API。

我可以通过捕获商店实例来解决这个问题:

multiSum(state) {
  const store = this
  return (count) => store.sum * count
}
Run Code Online (Sandbox Code Playgroud)

这可行,但相当冗长。有没有更好的(更符合框架的)方法来做到这一点?

Est*_*ask 10

this可以undefined位于箭头函数内部,因为它不能与常规函数互换,并且从父作用域获取上下文。

this和的用法在文档state中有详细解释。可以使用 或 ,但具有更好的 Typescript 和 IDE 支持。thisstatethis

在第一个片段中,state已在函数范围内可用,无需访问this

multiSum: (state) => (count) => state.sum * count
Run Code Online (Sandbox Code Playgroud)

在第二个片段中,const store = this不需要,因为商店已经存在this

multiSum() {
  return (count) => this.sum * count
}
Run Code Online (Sandbox Code Playgroud)