vuex
vuex copied to clipboard
vuejs
Issue with map* with Vuex4, Vue3
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.
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
https://github.com/asasugar/vuex-composition-maphooks 【modified to vuex helpers】
Check out this blog post for using the "vuex-composition-helpers" package: https://blog.codecourse.com/using-vuex-with-the-vue-composition-api/
