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

Question

我目前正在使用 Vuex 和 REST API 架构(使用 Django)练习 Vue。我想通过数据库检索数据并将数据存储在我的全局状态中，以便在我的 Vue 组件中访问它。到目前为止它工作正常，但有一件奇怪的事情我不明白。

当我启动我的应用程序时，我的主页当前没有显示任何内容。我单击菜单项“联系人”，联系人组件加载(路由器 View )(执行 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;
    }
  }
});

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

Answer 1

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

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