是否可以将图片存储在Vuex中？该存储方案是否推荐使用？

是完全可行的，不管你是要存储头像的访问URL，还是压缩后的base64格式图片数据，都可以存入Vuex。

需要根据你存储的内容类型判断，具体如下：

优先推荐的场景：仅存储头像URL路径 #

• 头像URL本身是轻量字符串，存入Vuex几乎不会产生额外内存开销，完全符合Vuex管理全局公共状态的定位
• 配合vuex-persistedstate等持久化插件将Vuex数据同步到localStorage后，页面刷新时无需重新调用用户信息接口获取头像路径，能直接从本地读取使用，完全满足你降低资源请求消耗的需求
• 全局多组件可直接从Vuex取用头像路径，无需每个组件单独请求，也减少了重复接口调用的可能

谨慎选择的场景：存储base64格式的缩略图 #

如果你的缩略图已经过压缩，单张体积在100KB以内，可以选择这种方案，额外优势是可以减少一次图片资源的HTTP请求，头像加载速度会更快。但需要注意以下限制：

• 体积过大的base64数据会占用过多运行内存，反而会影响页面整体性能
• 如果做了Vuex持久化，localStorage一般只有5MB的存储配额，过大的base64会快速占满存储空间，影响其他需要本地存储的功能运行

额外注意事项 #

• 如果需要页面刷新后仍能复用存储的头像数据，必须搭配Vuex持久化方案使用，否则刷新后Vuex数据清空，还是需要重新发起请求获取资源
• 多账号切换场景下，要在用户登出时及时清空Vuex中存储的头像数据，避免出现不同账号头像串用的问题
• 无论哪种存储方式，都不建议存入未压缩的原图像数据，性能收益远低于带来的资源开销

内容的提问来源于stack exchange，提问作者C LALHMANGAIHA