Javascript 如何防止Vue多次加载数据？

我目前正在使用Vuex和RESTAPI体系结构（使用Django）练习Vue。我想通过数据库检索数据，并将数据存储在全局状态中，以便通过Vue组件访问数据。到目前为止效果还不错，但有一件奇怪的事我不明白

当我启动我的应用程序时，我的主页上目前没有显示任何内容。我点击“联系人”菜单项，联系人组件加载（路由器视图）（执行API GET调用）并显示所有创建联系人的表格，并正确显示（真相来源现在是我的全局状态）。我可以编辑、删除和查看联系人。联系人现在也存储在全局状态

问题：每次我加载联系人组件时，都会调用mounted（）生命周期（这很有意义），并从状态中的API加载联系人，因此整个列表会被反复复制。我只希望Vue只发出一次GET请求，然后访问状态数据（联系人现在存储在哪里）

另一种情况是，当我更新联系人并单击“上一步”进入“联系人”菜单项时，列表中包含旧联系人和已更新联系人，但当我刷新页面时，一切正常

谢谢

我的代码

state.js

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;
    }
  }
});

联系人列表.vue

<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>

从“../../components/Contacts/Contact.vue”导入联系人；
从“vuex”导入{MapGetter，mapActions}；
导出默认值{
姓名：“联系人列表”，
组成部分：{
接触
},
计算：{
…映射获取程序（[“联系人”]）
},
方法：{
…映射操作（[“initContacts_AC”]）
},
安装的（）{
this.inituac（）；
}
};

只需检查是否存在已从后端检索到的联系人

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

编辑：

updateContact\u MU：（状态，数据）=>{
const contactIndex=state.contacts.findIndex（contact=>contact.id==data.id）；
如果（contactIndex<0）返回；
状态.触点.拼接（触点索引，1，数据）；
}

您有代码要显示吗？从父组件调用api，并更新存储。现在添加这些组件，通过传递道具或所需数据集的可用性有条件地删除和插入这些组件，我编辑了我的文章。这很有效，很有意义，谢谢！另一个问题：我可以使用created（）而不是mounted（）吗？为什么我要选择一个而不是另一个？当我更新联系人时，它仍然显示为新联系人，直到我重新加载它。ContactDetails.js

onSubmit（）{this.updateContact_AC（this.contact）；}，

在您的情况下，您还可以在创建的

中获取数据。但是您需要注意的是，
DOM
当时还没有呈现。我对您的解决方案有一个问题。当我更新联系人（由于反应性，我使用Vue.set进行更新）并返回到“联系人”时，除非重新加载页面，否则仍然存在未更新的联系人。你知道我该如何解决这个问题吗？你能就你的问题提供关于这个问题的详细信息吗？非常感谢你！非常感谢您的帮助：-）
updateContact_MU: (state, data) => {
  const contactIndex = state.contacts.findIndex(contact => contact.id === data.id);
  if (contactIndex < 0) return; 
  state.contacts.splice(contactIndex, 1, data);
}