Vuex 상태에서 v-if를 사용하는 Vue3 구성 요소

Vuex 상태에서 v-if를 사용하는 Vue3 구성 요소

내가 보여줄 수 있는 코드는 한정되어 있지만, vuex 스토어의 값을 기준으로 V-If 문구를 사용하려고 한다.

컴포넌트 API와 typecript로 작업하고 있다.

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>

나는 다음과 같이 하려고 했다.

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

근데 안 되네.

나는 코드를 공유할 수 있으면 좋겠지만, 나는 할 수 없지만 기본적으로 이것이 일어나고 있는 일이야.

고마워요.

모듈을 사용하여 저장소를 내 구성 요소로 가져왔지만 구성 요소의 API 설정에서 저장소를 내보내야 했다.그 후에 state.store.errorOrderPending이 작동했다.

참조URL: https://stackoverflow.com/questions/67404402/vue3-component-using-v-if-from-vuex-state