Vue中Pinia Setup Store内ref值的按需加载实现方案问询

针对你在Pinia Setup Store中需要按需加载并缓存数据库数据的需求，推荐以下几种简洁且贴合Vue生态的实现方式：

方案一：使用Vue自定义Ref（customRef） #

这是最贴合Vue响应式特性的方案，通过customRef封装懒加载逻辑，让访问数据时自动触发加载，后续直接返回缓存值，无需额外调用函数。

import { defineStore } from 'pinia'
import { customRef } from 'vue'

export const useMyStore = defineStore('myStore', () => {
  let cachedData = null
  let isLoading = false

  // 自定义懒加载ref
  const myRef = customRef((track, trigger) => ({
    get() {
      track() // 追踪响应式依赖
      // 未加载且未在请求中时触发数据库读取
      if (!cachedData && !isLoading) {
        isLoading = true
        readMyRefFromDB().then(data => {
          cachedData = data
          isLoading = false
          trigger() // 通知依赖更新
        })
      }
      return cachedData
    },
    set(newValue) {
      cachedData = newValue
      trigger() // 手动触发更新（如需修改缓存值）
    }
  }))

  // 实际数据库请求函数
  async function readMyRefFromDB() {
    // 替换为你的数据库查询逻辑
    return new Promise(resolve => {
      setTimeout(() => resolve('从数据库获取的目标数据'), 1000)
    })
  }

  return { myRef }
})

使用方式 #

在组件中直接访问store.myRef.value即可：

import { useMyStore } from '@/stores/myStore'

const store = useMyStore()
// 第一次访问自动触发加载，后续直接返回缓存值
const data = store.myRef.value

方案二：封装异步Getter/方法 #

如果需要更灵活的加载控制（比如显示加载状态），可以在Store中封装加载逻辑，提供统一的访问入口：

import { defineStore } from 'pinia'
import { ref, computed } from 'vue'

export const useMyStore = defineStore('myStore', () => {
  const myData = ref(null)
  const isLoaded = ref(false)
  const isLoading = ref(false)

  // 核心加载逻辑，自带重复请求拦截
  async function loadMyData() {
    if (isLoaded.value || isLoading.value) return
    isLoading.value = true
    try {
      myData.value = await readMyRefFromDB()
      isLoaded.value = true
    } finally {
      isLoading.value = false
    }
  }

  // 异步computed，访问时自动触发加载
  const myLazyData = computed(async () => {
    await loadMyData()
    return myData.value
  })

  // 或提供Promise风格的访问方法
  async function getMyData() {
    await loadMyData()
    return myData.value
  }

  async function readMyRefFromDB() {
    // 实际数据库请求
    return new Promise(resolve => {
      setTimeout(() => resolve('数据库返回数据'), 1000)
    })
  }

  return { myLazyData, getMyData, isLoading }
})

使用方式 #

• 用异步computed（需配合await或Suspense）：

const store = useMyStore()
const data = await store.myLazyData.value

• 用Promise方法：

const store = useMyStore()
const data = await store.getMyData()

方案对比 #

• 自定义Ref方案：最简洁，访问方式和普通ref完全一致，适合无需额外加载状态的场景。
• 异步Getter/方法方案：能方便获取加载状态，适合需要显示loading提示的场景。

两种方案都能避免重复调用加载函数的问题，完全符合Vue和Pinia的设计理念。

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