tl;dr
How to access other getters from a parameterized getter?
Normally, you can use this.myGetter
; but a parameterized getter is implemented as an arrow function, wherein this
is undefined.
What's the preferred way to handle this case in Pinia?
I'd like to create a parameterized getter (multiSum
) in my Pinia store, which accesses another getter (sum
).
Getters can be accessed via this
, but that won't work from within an arrow function which is used to implemented a parameterized getter: multiSum
crashes because this
is undefined
in the context of the nested arrow function.
getters: {
sum: (state) => state.a + state.b,
multiSum: (state) => (count) => this.sum * count // crash: this is undefined
}
In Vuex, parameterized getters can access other getters via a parameter instead of this
, which also works in arrow functions. But afaik this API does not existing in Pinia.
I can work around this by capturing the store instance:
multiSum(state) {
const store = this
return (count) => store.sum * count
}
This works, but is pretty verbose. Is there a better (more framework-compliant) way to do this?
this
can be undefined
inside arrow function because it's not interchangeable with regular function and gets a context from parent scope.
The usage of this
and state
is explained in details in the documentation. Either this
or state
can be used, but this
has better Typescript and thus IDE support.
In the first snippet, state
is already available in function scope, there is no need to access this
:
multiSum: (state) => (count) => state.sum * count
In the second snippet, const store = this
isn't needed because a store is already this
.
multiSum() {
return (count) => this.sum * count
}