How not to load content if it is already loaded?

Question

Vue.js

Hello everyone!
For example, there is a list of users. When you click on a user, a popup opens and various information about the user is loaded into it from the server.
When the popup closes, all the loaded information is removed from the DOM, and if you click on the same user again, the request will again be sent to the server for information, which is not rational...
My Popup is organized as a separate component.
Has anyone come across a problem, how did you solve it?

Answer 1

Create a cacheData object, add data there by, say, user id, and check for the presence of the cache before the request:

function (id) {
  if (this.cacheData[id])  {
    showPopup(); // код отвечающий за попап
    return;
  }

  axios.get().then((resp) = > {
    this.cacheData[id] = resp.data;
  })
}