Pinia 适合管理图片懒加载的全局状态而非 DOM 行为，如加载中、成功、失败、重试次数等，适用于跨组件共享、错误响应、重试同步、统计埋点及 CDN 切换等场景。
Pinia 本身不直接管理图片懒加载的 DOM 行为（那是指令或组合式函数的职责），但它非常适合管理与懒加载相关的全局状态：比如某张图片是否已加载、是否加载失败、是否正在加载中、失败后是否重试过等。这些状态一旦跨组件共享（如列表页+详情页共用同一组商品图、错误统计看板需汇总所有失败图片），就该交给 Pinia 统一维护。
图片加载状态应存入 Pinia 的典型场景
不是所有图片状态都要进 Pinia。以下情况建议放入 Store：
- 需要全局响应的加载失败行为，例如“连续 3 张图加载失败 → 自动切换 CDN 域名”
- 用户主动触发的重试操作需同步到多个视图（如图片画廊页 + 底部错误日志面板）
- 统计类状态，如
failedImageCount、totalLazyLoaded，供埋点或监控使用 - 图片资源的元信息缓存，比如某 url 对应的最终加载结果（成功/404/超时），避免重复请求
设计一个轻量级图片状态 Store
推荐按 URL 做键值管理，避免冗余数据：
import { defineStore } from 'pinia'
export const useImageLoadStore = defineStore('imageLoad', {
state: () => ({
// key: 图片 URL，value: 'idle' | 'loading' | 'success' | 'error'
statusMap: new Map(),
// 记录各 URL 失败次数，用于限频重试
failCountMap: new Map(),
// 全局开关：是否启用懒加载策略（方便测试/降级）
isEnabled: true
}),
actions: {
startLoad(src) {
this.statusMap.set(src, 'loading')
this.failCountMap.set(src, this.failCountMap.get(src) || 0)
},
markSuccess(src) {
this.statusMap.set(src, 'success')
// 加载成功后可自动清理失败计数
this.failCountMap.delete(src)
},
markError(src) {
const count = (this.failCountMap.get(src) || 0) + 1
this.failCountMap.set(src, count)
this.statusMap.set(src, 'error')
},
retry(src) {
if (this.failCountMap.get(src) < 3) {
this.startLoad(src)
}
},
reset() {
this.statusMap.clear()
this.failCountMap.clear()
}
},
getters: {
isFailed: (state) => (src) => state.statusMap.get(src) === 'error',
isLoading: (state) => (src) => state.statusMap.get(src) === 'loading',
getFailCount: (state) => (src) => state.failCountMap.get(src) || 0
}
})
与懒加载指令协同工作
自定义指令（如 v-img-lazy）负责监听进入视口、发起请求、处理 onload/onerror；它通过调用 Pinia Store 更新状态，而非自己维护状态变量：
import { useImageLoadStore } from '@/stores/imageLoad'
app.directive('img-lazy', {
mounted(el, binding) {
const src = binding.value
const store = useImageLoadStore()
// 进入视口时触发加载
const observer = new IntersectionObserver(
([entry]) => {
if (entry.isIntersecting && store.isEnabled) {
store.startLoad(src)
el.src = src
el.onload = () => store.markSuccess(src)
el.onerror = () => store.markError(src)
}
},
{ rootMargin: '100px' } // 提前加载，防滚动过快漏掉
)
observer.observe(el)
// 解绑时清理（防止内存泄漏）
el._imgObserver = observer
},
unmounted(el) {
el._imgObserver?.disconnect()
}
})
这样，组件里只需写 <img v-img-lazy="item.imgUrl" />，而错误重试按钮、加载状态徽标、失败统计卡片等，都可以从同一个 Store 读取最新状态，无需 props 透传或事件广播。
加载失败后的兜底与恢复逻辑
Pinia 可承载业务层的容错策略，例如：
- 在
markError后自动 fallback 到备用图：el.src = src.replace(/\.jpg/, '_fallback.jpg') - 结合
getFailCountgetter，在 UI 层显示「重试 ×2」按钮，并禁用第 3 次以上点击 - 页面卸载前将失败 URL 存入 localStorage，下次打开时自动重试（配合
pinia-plugin-persistedstate） - 暴露
retryAllFailedaction，供开发者工具面板一键触发全量重试
