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

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.

Collectives™ on Stack Overflow

Vue3 component using v-if from vuex state

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related