Svelte应用中如何在全局共享函数内访问store存储的值?
推荐实现方案:利用store订阅+闭包维护实时值
你可以在stores.js中订阅所有函数需要用到的store,将最新值存在闭包变量中,函数执行时直接读取闭包内的实时值即可,完全符合Svelte最佳实践,也规避了你提到的两种方案的缺陷。
代码示例(以路由跳转函数为例)
// stores.js import { writable, tick } from 'svelte/store'; // 你的业务store定义 export const currentUser = writable(null); export const pageFormData = writable({}); export const currentRoute = writable('/'); // 闭包变量存储所有需要用到的store的最新值 let _currentUser, _pageFormData, _currentRoute; // 订阅store,自动更新闭包变量 currentUser.subscribe(val => _currentUser = val); pageFormData.subscribe(val => _pageFormData = val); currentRoute.subscribe(val => _currentRoute = val); // 导出路由跳转函数 export async function changeRoute(newRouteDetails) { // 直接读取闭包内的最新值,无需get()也无需调用方传参 const currentState = { user: _currentUser, formData: _pageFormData, route: _currentRoute }; // 执行状态暂存逻辑 savePrevState(currentState); // 即使需要等待tick执行完成,闭包变量也会自动更新为最新值 await tick(); // 此处读取的闭包变量已经是tick后的最新状态 // 路由跳转逻辑 window.history.pushState({}, '', newRouteDetails.path); currentRoute.set(newRouteDetails.path); }
方案优势
- 完全遵循Svelte响应式设计规范,没有使用不推荐的
get()方法 - 不需要调用方传入任何store值,组件直接导入函数即可调用
- 适配异步场景:即使函数内有
tick()、接口请求等异步逻辑,闭包变量也始终是最新的store值 - 性能开销极低:store的订阅只会在初始化时执行一次,后续值更新都是直接修改闭包变量,没有额外开销
补充说明:关于官方不推荐get()的场景
官方文档不推荐的是高频调用场景下反复使用get(),因为get()的底层实现是临时订阅store、取值后立即取消订阅,高频调用会产生额外性能开销。如果你的路由跳转函数本身调用频率很低,直接使用get()其实也完全可用,不需要过度优化。
内容的提问来源于stack exchange,提问作者artfulrobot
相关产品推荐
相关产品推荐

