foxbenjaminfox/vue-async-computed

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.