H5W3
当前位置:H5W3 > JavaScript > 正文

vue自定义全局过滤器数据缓存后,数据修改后不能实时更新

环境:vuec-li,element-ui,自定义全局过滤器
问题描述:在一个循环出来的列表里面 针对列表中的一个字段需要请求后台的字典项接口,例如后台返回一个type:1,前端需要将type=1 转换成汉字例如后台返回的是type=1 前台要显示成type=美食,我的解决办法是做一个全局自定义过滤器,但是例如我的列表有10条 每天有4个这样的字段 我就会请求40次的接口 显然不可取,想到请求一次把数据缓存起来但是这时候如果后台修改了数据,前端就不能实时更新,有什么好的办法呢

预期结果:请求只请求一次,实现和后端数据同步

 


···回复:

这种场景最适合用 Vuex。

  1. 首先你应该有一个 API,可以返回所有可能用到的 filter
  2. 在应用启动的时候(或其它合适的地方),请求 API 获取所有 filter(this.$store.dispatch
  3. 在需要翻译的地方,使用 computed 更新内容(结合 mapState

建议不要再用 filter,因为:

  1. Vue 3 会把它移除
  2. filter 不支持响应式

 

本文地址:H5W3 » vue自定义全局过滤器数据缓存后,数据修改后不能实时更新

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址