내 구성 요소에서 작업에 의해 반환된 값을 사용할 수 없습니다.

내 구성 요소에서 작업에 의해 반환된 값을 사용할 수 없습니다.

내 저장 작업은 구성 요소에서 해당 작업을 호출할 때 확인할 값을 반환합니다.하지만 무슨 이유에선지, 내가 얻는 건undefined내가 실제로 어떤 행동에서 돌아오고 있는 그 어떤 가치들 대신에 말이야.

왜요?

저장 작업:

export const actions = {
  async initialize ({ state, commit, dispatch }) {
    await this.$axios.get('myEndpoint')
      .then((res) => {
        return true
      }).catch((error) => {
        return false
      })
  }
}

컴포넌트 코드:

async mounted () {
  const initializeResult = await this.initialize()
  console.log(initializeResult)
}

vuex 스토어 패턴을 존중해야 합니다.먼저 변환 내에서 변환될 수 있는 상태를 생성해야 합니다.변환된 상태는 액션에서 비동기 콜백 내에서 커밋될 수도 있습니다.

export const state={
  initResult:null
}

export const mutations={
    SET_RESULT(state,payload){
      state.initResult=payload
   }
}

export const actions = {
  async initialize ({ state, commit, dispatch }) {
    await this.$axios.get('myEndpoint')
      .then((res) => {
        commit('SET_RESULT',true)
      }).catch((error) => {
           commit('SET_RESULT',false)
      })
  }
}

그런 다음 컴포넌트에서 마운트된 후크 내부의 액션을 디스패치하고 계산된 속성을 사용하여 상태를 반환합니다.

computed:{
    result(){
       return this.$store.initResult;
  }
},
mounted () {
  this.$store.dispatch('initialize')
 
}

언급URL : https://stackoverflow.com/questions/68627566/cant-use-value-returned-by-action-in-my-component