Vue3 component using v-if from vuex state

Question

I'm limited with the code I could show, but I am trying to use a V-If statement based on a value in the vuex store.

We're working with component API and typescript.

The partial code from the DataStore.ts:

export const store = createStore<state>({
   state: {
     errorOrderPending: false
   },
   mutations: {
     setErrorOrderPending(state, newVale: boolean) {
       state.errorOrderPending = newVale;
     }
   }
});

export function useStore() {
   return baseUseStore(key);
}

In the component, I'm importing the store and useStore.
<template>
  <div class="modal" >
    <p>Show modal</p>
  </div>
</template>

I tried to do:

<div v-if="$store.state.errorOrderPending" class="modal" >

But it's not working.

I wish I can share the code but I can't but this is basically what is happening.

Thanks

Even if you can't post your full code, you should be able to produce a minimal example reproducing your issue. — jaudo
– jaudo, Commented May 5, 2021 at 15:54
Composition API and TypeScript. I was recruited for this project for a lot of it was already built. Any help will be appreciated. Can you put the solution for both just in case? Thanks. — DonnaZ
– DonnaZ, Commented May 5, 2021 at 18:49

DonnaZ · Accepted Answer · 2021-05-05 20:38:49Z

1

Imported the store into my component with the module, but I had to export the store from the component's API setup. After I did that, state.store.errorOrderPending worked.

answered May 5, 2021 at 20:38

DonnaZ

436 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue3 component using v-if from vuex state

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related