Issue with map* with Vuex4, Vue3

[engineertdog]

Version

4.0.0

Reproduction link

https://gitlab.com/engineertdog/vuex-demo-bug

Steps to reproduce

Clone the repo and run. I've included code for the working and non-working portions.

What is expected?

I would expect that the map* methods in Vuex4 can be utilized in a computed method so that the get/set methods properly execute getters/setters from the store.

While I am using Quasar, as noticed in the simplified demo, using the function returned from mapGetters inside a computed property does not work and throws errors. The same goes for mapActions when used in conjunction with the set function of the computed property.

However, the functions returned from map* work just fine when used inside of the html template.

What is actually happening?

When using functions returned from map* functions in Vuex4 inside of computed properties (get or set), errors are thrown. The biggest issues seems to be that $this is undefined, but this happens regardless of whether or not arrow functions are used in the computed property.

[towertop]

map* helpers is not for composition api in setup(), cause they depend on 'this':

https://github.com/vuejs/vuex/blob/4.0/src/helpers.js#L88

[lukeJEdwards]

have a look at this issue, #1725

[asasugar]

https://github.com/asasugar/vuex-composition-maphooks 【modified to vuex helpers】

[mkkeems]

Check out this blog post for using the "vuex-composition-helpers" package:
https://blog.codecourse.com/using-vuex-with-the-vue-composition-api/