How can this requirement scenario be implemented on the web side? (list related)

there is such a scene:

A list page, each list item has a like button, which is activated in red and gray if not.
each list item can be clicked to jump to the details, and there is also a like button in the details page.
if you like in the details, how to transfer the like status to the list page?

have thought about several options:

  1. request again every time you enter the list page, but this is not good enough, and it is not feasible in the case of paging .
  2. use vuex to store the list data in the global store, and modify the corresponding data in the store when you like the details page. but there is a certain cost to maintain the store,. After quitting the list, you need to destroy the list data to avoid data occupying memory .
  3. make a global tag after giving a like. Check the tag every time you enter the list page, and update the status according to the tag.

would like to ask you how to achieve such a function? Is there a better solution

Mar.10,2022

both list items and detail items have a unique ID, that records all overliked data ID, into a like collection (set structure), which can be managed using vuex. Whether in the list or in the details, the data ID is added to the like collection as long as the currently loaded data is a like after the new add-on. If the user likes it, the ID is added to the likes collection, and if the approval is cancelled, the ID is removed from the likes collection. You only need to read whether the user likes or not according to whether the ID exists in the like collection. The like status of the whole station can be managed uniformly, and the status of the whole station can be updated in one operation.


1. I understand that whether you like or cancel likes, this function needs to interact with the backend, and the final data is stored in the backend
2. So submit it to the backend after each like. When you enter the details page, pull the latest data from the backend. No matter whether it is stored in store or where, you should keep the data of the page consistent with the backend


should you submit your likes to the backend? Otherwise, what is the use of this like, the exit list will be gone?


when giving a like, save the like data to the backend. At the same time, modify the data that has been requested locally. When you click on the details page, you can pass the value over, because the local Synchronize has been modified to avoid unnecessary duplicate requests. This is what I do. Watch whether the bosses have any more optimized methods


like to submit to the backend, and the list page takes the initiative to ajax refresh. This is normal procedure. There is little local storage state.


it's best to retrieve the data of that page again when you return to that page

Menu