Vue 및 axios를 사용하여 페이지를 새로 고치지 않고 데이터 업데이트

Question

Vue와 Axios에 2개의 탭(질문과 데이터)이 있는 페이지가 있습니다. 첫 번째 탭에서 양식을 작성하고 제출합니다. 저장 버튼 v-on:click="save".

저장: function() {
                축({
                        방법: '패치',
                        URL: URL,
                        데이터: this.data
                    })
                    .then(함수(응답) {
                        this.data = 응답.데이터;
}

두 번째 탭(데이터)에는 저장된 데이터 목록이 있습니다.

mounted() {
        액시오스
            .get('/api/recommended-products/?patient_uuid=' + '{{patient.uuid}}')
            .then(응답 => (this.data= response.data.results))
       }

이제 질문 탭에서 답변을 변경하면 데이터 탭의 목록도 자동으로 변경됩니다. 페이지를 새로 고치면 변경됩니다. Mounted()가 작동합니다. updateList() 함수를 만들어 보았습니다.

updateList: function() {
            액시오스
                .get('/api/recommended-products/?patient_uuid=' + '{{patient.uuid}}')
                .then(응답 => (this.data= response.data.results))
}

save() 함수에 추가하세요. 예를 들면 다음과 같습니다.

저장: function() {
                축({
                        방법: '패치',
                        URL: URL,
                        데이터: this.data
                    })
                    .then(함수(응답) {
                        this.data = 응답.데이터;
this.updateList();
}

문제는 이 방법이 두 번째에도 작동한다는 것입니다(때로는 작동하고 때로는 작동하지 않습니다). 그래서 방금 save()에 location.reload();를 추가했지만 이 접근 방식은 마음에 들지 않습니다. 페이지를 새로 고치지 않고 데이터 목록을 업데이트할 수 있나요? updateList() 함수에 내가 뭘 잘못하고 있나요?

Answer 1

제 생각에는 vuex와 해당 getter를 사용해야 합니다.

이렇게 하면 모든 애플리케이션에 대해 요청이 하나만 있으며 상태가 업데이트되면 데이터가 자동으로 새로 고쳐집니다.

그런 다음 상태가 업데이트될 때 자동으로 다시 렌더링되는 计算속성을 사용하여 데이터에 액세스할 수 있습니다.

---

다음은 여러 탭을 사용하는 예입니다: https://codesandbox.io/s/vuex-axios-demo-forked-m0cqe4?file=/src/App.vue

이 예에서는 JsonPlaceHolder API를 통해 게시물 정보를 로드하고 있습니다.

매번 양식을 다시 보냅니다(기능 사용). 저장 작업을 호출한 다음 상태를 업데이트하여 getter가 데이터를 다시 렌더링하도록 트리거합니다.

참고: 첫 번째 게시물을 기본값 1로 Mounted에 로드했습니다.