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

Question

有这么一个场景:
一个列表页,每一个列表项都有点赞按钮,已点赞为红色激活态,未点赞为灰色.每一个列表项都能点击跳转进入详情,详情页面里也存在点赞按钮.这时候如果在详情内点赞了,如何把这个已点赞状态传递到列表页?
想过几个方案:
每次进列表页面重新请求,但是这样不够优,并且在分页的情况下是不可行的.
用vuex将列表数据存在全局store中,在详情页面点赞的时候去修改store里的对应数据,但是这样需要维护store,有一定成本,退出列表后需要销毁列表数据,避免数据占用内存
点赞后打个全局的标记,每次进入列表页面查看一下标记,根据标记去做状态的更新.
想问问大家是怎么实现这样的功能的?有没有更好的解决方案

Answer 1

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

Answer 2

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