Can't prefix with underscore
Closed this issue · 2 comments
I've been using things like mapGetters()
to import a list of getters, some of which are asynchronous, and so I'd like to use something like this:
asyncComputed: {
_eventMembers () {
return this.eventMembers
}
},
computed: {
...mapGetters(['eventMembers'])
}
But this doesn't work. If I reverse the naming like this:
asyncComputed: {
eventMembers () {
return this._eventMembers
}
},
computed: {
...mapGetters({'_eventMembers': 'eventMembers'})
}
it does work, but then I have to use the 'long' (object) form for mapGetters()
, and I often have lots of those. Is there some reason why underscore can't be used as the first character of an asyncComputed property, or is it a bug?
Tx.
The root of the problem is this. Properties in data that are "reserved", that is to say begin with a _
or a $
, aren't set up to be reactive.
Behind the scenes, vue-async-computed
's async computed properties are data
properties that are automatically updated as necessary, so this means that if they begin with an underscore (or a $
), Vue won't make them reactive.
So it technically "works", in that the value still gets set, but it's not reactive the way you'd expect it to be.
I can't fix this directly: the internals of Vue that set the reactivity of properties isn't something that can be affected by a plugin. But perhaps I can find a workaround of some sort or another that will get Vue to nevertheless acknowledge it as reactive.
Thanks for the explanation—if it's possible to find a workaround, that would by great, but at least understanding the problem I can easily just do this:
asyncComputed: {
async_eventMembers () {
return this.eventMembers
}
},
computed: {
...mapGetters(['eventMembers'])
}
I'll just use a different naming convention within my code and the problem goes away :). In fact, I guess it might even be better to put the async_
prefix in the Vuex store, so that it's obvious which getters require special handling.