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

Question

有这么一个场景:

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

想过几个方案:

1. 每次进列表页面重新请求, 但是这样不够优, 并且在分页的情况下是不可行的.

2. 用vuex将列表数据存在全局store中, 在详情页面点赞的时候去修改store里的对应数据, 但是这样需要维护store, 有一定成本, 退出列表后需要销毁列表数据, 避免数据占用内存

3. 点赞后打个全局的标记, 每次进入列表页面查看一下标记, 根据标记去做状态的更新.

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

Answer 1

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