programing

vuex 작업 개체 내부에 비동기 코드를 작성하는 방법은 무엇입니까?

linuxpc 2023. 6. 10. 08:30
반응형

vuex 작업 개체 내부에 비동기 코드를 작성하는 방법은 무엇입니까?

제 vue.js 앱에 Restapi가 있는데 vuex를 사용하여 비동기 코드를 작성하는 다른 방법이 있는지 알고 싶습니다.

내 코드는 이렇게 생겼습니다.

//store.js

const actions = {
    async GET_CLAN_MEMBERS({commit},id){
        let token = users.getters.getToken;
        return await axios.post(config.api + 'clans/' + id,{token})
    }
};

//Component.vue

created (){       
   this.$store.dispatch('GET_CLAN_MEMBERS',this.$route.params.id).then((res) => 
   {
      this.members = res.data;
   })
},

지금은 작동하고 있지만, 여기가 가장 좋은 장소인지, 아니면 store.js 파일 안에 쓰는 연습인지 모르겠습니다.
잘 부탁드립니다.

표준 관행: 액션은 항상 세터로 사용되므로 api 콜백 응답 후에는 응답 데이터를 기반으로 상태를 변경하기 위해 변환을 호출하고 getter로 사용되는 getter를 호출해야 합니다(상태 데이터 검색).

따라서 표준 실행을 위해 아래 흐름도를 따라야 합니다.

여기에 이미지 설명 입력

자세한 내용은 여기를 참조하십시오.

저도요, 이 질문을 머리 위에 받았고 실제로 가게는 그들의 행동 안에 있는 레스트 api를 소비할 수 있습니다.

이것이 vuex가 너무 큰 저장 파일을 피하기 위해 모듈을 지원하는 이유입니다.

여기서 몇 가지 실험을 수행했습니다(모듈화를 생략했지만 좋은 예로 작동함). 공식 문서 자체에는 비동기 작업을 작업 내부에 호출하도록 나와 있습니다.따라서 내부 동작에 대한 axios/rest가 권장되는 방법입니다.

언급URL : https://stackoverflow.com/questions/54618369/how-to-write-async-code-inside-vuex-action-object

반응형