Vue가 데이터를 여러 번 로드하지 않도록 하려면 어떻게 해야 합니까?

Vue가 데이터를 여러 번 로드하지 않도록 하려면 어떻게 해야 합니까?

현재 Vue with Vue와 REST API 아키텍처(Django)를 연습하고 있습니다.Vue 컴포넌트 전체에서 액세스할 수 있도록 데이터베이스에서 데이터를 가져와 글로벌 상태로 저장합니다.아직까지는 잘 작동하는데, 한 가지 이상한 점이 있습니다.

앱을 실행하면 현재 아무것도 표시되지 않는 홈페이지가 있습니다.[ Contacts ](연락처) 메뉴 항목을 클릭하면 연락처 컴포넌트가 로드(라우터 뷰)(API GET 호출이 실행됨)되어 작성된 모든 연락처의 테이블이 올바르게 표시됩니다(진실정보의 출처는 현재 나의 글로벌 상태).연락처를 편집, 삭제 및 표시할 수 있습니다.연락처도 글로벌 상태로 저장됩니다.

문제:컨택 컴포넌트를 로드할 때마다 mounted() 라이프 사이클이 호출되고(이는 타당합니다), 스테이트 내의 API에서 컨택이 로드되므로 리스트 전체가 몇 번이고 중복됩니다.Vue가 GET 요청을 한 번만 한 후 주(州)의 데이터에 액세스하면 됩니다(연락처 저장 위치).

또 다른 시나리오는 연락처를 업데이트하고 연락처 메뉴 항목으로 돌아가면 목록에 이전 연락처와 업데이트된 연락처가 포함되지만 페이지를 새로 고치면 문제가 없습니다.

감사합니다!

마이코드

state.displaces.displaces

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

import { apiService } from "../utils/api.service.js";

export const store = new Vuex.Store({
  state: {
    contacts: []
  },
  mutations: {
    initContacts_MU: (state, data) => {
      state.contacts.push(...data);
    },
    updateContact_MU: (state, data) => {
      let getContact = state.contacts.filter(contact => contact.id === data.id);
      let getContactIndex = state.contacts.indexOf(getContact);
      state.contacts.splice(getContactIndex, 1, data);
    },
    deleteContact_MU: (state, data) => {
      let getContact = state.contacts.filter(contact => contact.id === data.id);
      let getContactIndex = state.contacts.indexOf(getContact);
      state.contacts.splice(getContactIndex, 1);
    },
    createContact_MU: (state, data) => {
      state.contacts.unshift(data);
    }
  },
  actions: {
    initContacts_AC({ commit }) {
      let endpoint = "api/contacts/";
      apiService(endpoint).then(data => {
        commit("initContacts_MU", data);
      });
    },
    updateContact_AC({ commit }, contact) {
      let endpoint = "/api/contacts/" + contact.slug + "/";
      apiService(endpoint, "PUT", contact).then(contact => {
        commit("updateContact_MU", contact);
      });
    },
    deleteContact_AC({ commit }, contact) {
      let endpoint = "/api/contacts/" + contact.slug + "/";
      apiService(endpoint, "DELETE", contact).then(contact => {
        commit("deleteContact_MU", contact);
      });
    },
    createContact_AC({ commit }, contact) {
      let endpoint = "/api/contacts/";
      apiService(endpoint, "POST", contact).then(contact => {
        commit("createContact_MU", contact);
      });
    }
  },
  getters: {
    contacts: state => {
      return state.contacts;
    }
  }
});

연락처 목록표시하다

<script>
import Contact from "../../components/Contacts/Contact.vue";

import { mapGetters, mapActions } from "vuex";

export default {
   name: "ContactList",
   components: {
      Contact
   },
   computed: {
      ...mapGetters(["contacts"])
   },
   methods: {
      ...mapActions(["initContacts_AC"])
   },
   mounted() {
      this.initContacts_AC();
   }
};
</script>

백엔드에서 이미 검색된 연락처가 있는지 확인하세요.

   computed: {
      ...mapGetters(["contacts"])
   },
   methods: {
      ...mapActions(["initContacts_AC"])
   },
   mounted() {
      if (this.contacts && this.contacts.length > 0) return; // already fetched.
      this.initContacts_AC();
   }

편집:

updateContact_MU: (state, data) => {
  const contactIndex = state.contacts.findIndex(contact => contact.id === data.id);
  if (contactIndex < 0) return; 
  state.contacts.splice(contactIndex, 1, data);
}

언급URL : https://stackoverflow.com/questions/58415021/how-to-prevent-vue-from-loading-the-data-multiple-times