0

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);
    }
  });
}
8
  • 1
    Consider explaining what exactly you want to do, what you tried and what didn't work. setup() function from composition api is available in v2 but <script setup> isn't. Commented Jan 14 at 15:48
  • 1
    Since you're using Vue2 and Vuex, I would rather stick to some simple Vuex imports without anything too fancy. The most things you pile up, the harder it will be to migrate and you probably have more important things to consider right now. Commented Jan 14 at 15:56
  • 1
    Consider starting to port some of your stores to Pinia and integrating them into your Vue 2 project. You can use Pinia with the Options API setup, allowing compatibility with both Vue 2 and Vue 3. This approach enables you to gradually migrate your app to Vue 3, feature by feature. However, one drawback is that you'll need to make adjustments to your existing Vue 2 files during the initial setup. Commented Jan 16 at 7:18
  • 1
    Thank you @jesvinpalatty, I think you're right about the situation. @kissu currently did exactly that as no other good option is available. @EstusFlask Vue 2.7 has <script setup> Commented Jan 16 at 14:30
  • @EstusFlask updated the question, I hope now the problem is clear. Commented Jan 16 at 14:45

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.