we're using VueX 3.6 with Vue 2.7. The project is old We can't go to Vue3. For new components, we're trying to use script/setup for new components. How to use VueX mapper functions in this situation? Specially mapActions.
Versions:
vue: 2.7.16
vuex: 3.6.2
Edit: (add details) Following is what I did
<script setup>
import { mapActions } from 'vuex';
const actions = mapActions({
fetchCoupons: 'coupon/fetchCoupons',
});
// later ...
onMounted(() => {
(async ()=> {
await actions.fetchCoupons()
})()
});
</script>
Got following error
Cannot read properties of undefined (reading 'dispatch')
This works fine in setup() or options api.
Following is the action which is being called
fetchCoupons: ({ dispatch }) => {
dispatch('handleAsyncAction', {
handler: async () => {
const res = await getAllCoupons();
dispatch('setData', res.data.data);
}
});
}
<script setup>