Svelte中如何向readable store传递自定义参数

Svelte 原生的readable本身没有预留直接传参的入口，根据参数是初始化固定还是需要动态更新，有两种成熟实现方式： #

方案1：工厂函数封装（适合初始化时传入固定参数） #

把创建readable实例的逻辑包裹在一个接收自定义参数的普通函数里，调用函数传入参数后返回配置好的store实例即可，这是最常用的轻量方案。
对应改造后的代码：

// 封装为接收参数的store工厂
export const createWorkerStore = (customFetchParams) => {
  return readable(
    [],
    async (set) => {
      // 首次请求使用传入的参数
      const response = await fetchAPI(customFetchParams)
      set(response)

      const interval = setInterval(async () => {
        // 轮询请求复用传入的参数
        const latestRes = await fetchAPI(customFetchParams)
        set(latestRes)
      }, 10000)

      // 必须返回清理函数，取消订阅时清除定时器避免内存泄漏
      return () => clearInterval(interval)
    }
  )
}

使用时直接传入参数创建store实例即可：

// 业务侧调用时传入自定义参数
const workerStore = createWorkerStore({ deptId: 10, status: 'on_duty' })

方案2：搭配独立参数store（适合store运行中动态更新参数） #

如果需要在store已经创建后，动态修改传入fetchAPI的参数，可以单独用一个writable store存储参数，在readable内部订阅参数变化，参数更新时自动重新拉取数据、重置轮询。
实现代码：

// 独立存储动态参数的writable store
const workerFetchParams = writable({ deptId: 10 })

export const worker = readable([], (set) => {
  let pollingInterval = null

  // 统一数据拉取逻辑
  const loadData = async (params) => {
    const res = await fetchAPI(params)
    set(res)
  }

  // 订阅参数变化：参数更新时立刻拉取数据，同时重置轮询定时器
  const unsubParams = workerFetchParams.subscribe((currentParams) => {
    if (pollingInterval) clearInterval(pollingInterval)
    loadData(currentParams)
    pollingInterval = setInterval(() => loadData(currentParams), 10000)
  })

  // 统一清理逻辑
  return () => {
    clearInterval(pollingInterval)
    unsubParams()
  }
})

// 导出参数更新方法，供外部动态修改请求参数
export const updateWorkerParams = (newParams) => {
  workerFetchParams.update(prev => ({ ...prev, ...newParams }))
}

注意事项 #

• 你原有实现没有返回readable的清理函数，定时器会在所有订阅者取消订阅后持续运行，会造成内存泄漏，所有副作用（定时器、事件监听、手动订阅）都要在返回的清理函数中释放。
• 初始化后参数不会变动的场景优先用方案1，代码更简洁易维护；需要动态改参数的场景选方案2。

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