Composition API(Vue 3)에서 Vuex 게터를 보는 방법

Composition API(Vue 3)에서 Vuex 게터를 보는 방법

내 지원서의 상태는 구성 요소가 로드된 후 로딩되는 것 같아, 그래서 내 생각은 상태 파악을 하는 것이었다.하지만 컴포지션 API에서 Vuex 게이터를 보려면 어떻게 해야 할까?

내 상태 & getter:

state: () => ({
    companies: [],
  }),
  getters: {
    getAvailableCompanies(state) {
      return state.companies
    }
  },
  [...]
}

내 모듈에서 스토어를 가져오는 경우:

import { store } from '@/store/store.js'

그리고 내 구성 요소의 설정() 함수에 있는 게터 값을 구하십시오.

const companies = ref(store.getters["companies/getAvailableCompanies"])
console.log("companies", companies)

이제 상태가 채워지면 (설치()에서도) 변경 사항을 주시하려고 한다.

watch(
  companies, (curr, old) => {
    console.log(curr, old)
  }
)

불행히도companies.value변하지 않고 그대로 있다undefined

사용하다ref이 경우 AFAIK는 다음 값 때문에 정확하지 않다.ref변수는 할당하는 순간에 설정되며 값을 재할당할 때만 변경된다.예를 들면 다음과 같다.

const companies = ref(store.getters["companies/getAvailableCompanies"]);
companies.value = [];

스토어에서 데이터가 준비(변경)되었을 때 회사 배열을 다시 계산하려면computed대신에

const companies = computed(() => store.getters["companies/getAvailableCompanies"]);

시계를 사용하여 확인하거나 보기에서 업데이트를 볼 수 있다.

참조URL: https://stackoverflow.com/questions/68437404/how-to-watch-a-vuex-getter-in-composition-api-vue-3