web端这种需求场景怎么实现合适?(列表相关)

Question

有这么一个场景:

一个列表页, 每一个列表项都有点赞按钮, 已点赞为红色激活态, 未点赞为灰色.
每一个列表项都能点击跳转进入详情, 详情页面里也存在点赞按钮.
这时候如果在详情内点赞了, 如何把这个已点赞状态传递到列表页?

想过几个方案:

1. 每次进列表页面重新请求, 但是这样不够优, 并且在分页的情况下是不可行的.
2. 用vuex将列表数据存在全局store中, 在详情页面点赞的时候去修改store里的对应数据, 但是这样需要维护store, 有一定成本, 退出列表后需要销毁列表数据, 避免数据占用内存
3. 点赞后打个全局的标记, 每次进入列表页面查看一下标记, 根据标记去做状态的更新.

想问问大家是怎么实现这样的功能的? 有没有更好的解决方案

Answer 1

点赞提交后台，列表页主动ajax刷新，这是正常流程。本地存储放状态很少。

Answer 2

最好返回某一页的时候再调取一遍那一页的数据

Answer 3

1.我的理解你不管点赞还是取消点赞，这个功能都是需要和后端交互的，最终数据是存在后端的
2.所以每次点赞之后提交给后端，进入详情页的时候从后端拉一下最新数据，无论是存store里还是存哪里，每次页面进入的时候要保持页面的数据和后端是一致的

Answer 4

点赞不应该提交后台吗？不然的话这个点赞有什么用，退出列表就没了？

Answer 5

在点赞的时候将点赞的数据存到后端，同时也修改本地已经请求好的数据，点进详情页的时候传值过去就行了，因为本地也已经同步修改了，可以避免不必要的重复请求，这是我的做法，围观大佬们还有没有更加优化的做法

Answer 6

不管是列表项还是详情项都会有一个唯一ID，将所有点过赞的数据ID，记录到一个赞集合中（set 结构），可以使用vuex管理。无论是在列表中还是详情中，只要新加载项之后，如果当前加载的数据是赞就将数据ID添加到赞集合中。如果用户点赞，则将ID添加到赞集合中，如果取消赞则将ID从赞集合中取消。读取用户是否赞只需要根据ID是否存在于赞集合中即可。将全站的赞状态统一管理，可以做到一处操作，全站状态更新。