I manage a shop in Pinia (using Vue 3) that frequently utilizes getters referring to other getters. I've been using state.getterName for this purpose, which has been functioning well, although occasionally it warns me that the getter does not exist. I just realized from the documentation that I should use this. when referencing a getter within another getter.
This is my current approach:
const useMyStore = defineStore('myStore', {
state:() =>({
state1: 100
}),
getters: {
getterName1: (state) => {
return state.state1 * 100
},
getterName2: (state) => {
return state.getterName1 - 100
}
}
})
I believe I should be doing it like this:
const useMyStore = defineStore('myStore', {
state:() =>({
state1: 100
}),
getters: {
getterName1: (state) => {
return state.state1 * 100
},
getterName2: () => {
return this.getterName1 - 100
}
}
})
My query is: why does using state.getterName incorrectly actually work? What potential risks am I exposing myself to by not using this? Should I consider reorganizing my store to incorporate this?
Including this discussion here for additional context. Also, I want to mention that I do not use TypeScript, so enforcing the return type is not an option.