[{"data":1,"prerenderedAt":106},["ShallowReactive",2],{"content:\u002Fposts\u002F2025\u002Fvue3-dynamic-pinia-store":3,"surround:\u002Fposts\u002F2025\u002Fvue3-dynamic-pinia-store":95},{"id":4,"title":5,"body":6,"canonical":19,"categories":68,"date":70,"description":71,"draft":72,"extension":73,"image":74,"meta":75,"navigation":79,"path":80,"permalink":81,"readingTime":82,"recommend":81,"references":81,"seo":87,"sitemap":88,"stem":89,"tags":90,"type":81,"updated":93,"__hash__":94},"content\u002Fposts\u002F2025\u002Fvue3-dynamic-pinia-store.md","【翻译】Vue 3 中的动态 Pinia Store",{"type":7,"value":8,"toc":65},"minimark",[9,23,26,29,32,43,46,49],[10,11,12],"auths-alex",{},[13,14,15,16],"p",{},"原文地址：",[17,18,22],"a",{"href":19,"rel":20},"https:\u002F\u002Falexop.dev\u002Ftils\u002Fdynamic-pinia-stores\u002F",[21],"nofollow","dynamic-pinia-stores",[24,25],"hr",{},[13,27,28],{},"今天我学习了如何通过生成唯一的商店 ID 在 Vue 3 中创建动态 Pinia 商店。当您需要对同一组件的多个实例（例如数据表或表单）进行单独的状态管理时，这非常有用。",[13,30,31],{},"操作方法如下：",[33,34,40],"pre",{"className":35,"code":37,"language":38,"meta":39},[36],"language-ts","function useStore(id: string) {\n    return defineStore(`store-${id}`, () => {\n        const data = ref({})\n\n        return { data }\n    })()\n}\n\n\u002F\u002F Usage example:\nconst tableOneStore = useStore('table1')\nconst tableTwoStore = useStore('table2')\n","ts","",[41,42,37],"code",{"__ignoreMap":39},[13,44,45],{},"每个Store实例都有自己的隔离状态，使其非常适合管理多个独立组件。这种方法可以防止状态冲突并保持数据的正确组织。",[13,47,48],{},"主要优点：",[50,51,52,56,59,62],"ol",{},[53,54,55],"li",{},"每个组件实例的隔离状态",[53,57,58],{},"干净且可维护的代码",[53,60,61],{},"使用 TypeScript 实现类型安全",[53,63,64],{},"非常适合动态组件",{"title":39,"searchDepth":66,"depth":66,"links":67},4,[],[69],"译","2025-01-10 14:14:59","使用多个组件实例的唯一 ID 创建动态 Pinia 存储",false,"md","https:\u002F\u002Fbitmc.uno\u002Fpicgo\u002Fvue3-dynamic-pinia-store.jpg",{"aside":76},[77,78],"toc","auth-alex",true,"\u002Fposts\u002F2025\u002Fvue3-dynamic-pinia-store",null,{"text":83,"minutes":84,"time":85,"words":86},"1 min read",0.99,59400,198,{"title":5,"description":71},{"loc":80},"posts\u002F2025\u002Fvue3-dynamic-pinia-store",[91,92],"Vue","Pinia","2026-02-07 23:23:50","lBGAOVNBD2C52Go4ina8fcNgkZoqzY8aavenwKYRpr4",[96,101],{"title":97,"path":98,"stem":99,"date":100,"type":81,"children":-1},"一个简易的文件共享系统的实现","\u002Fposts\u002F2025\u002Fa-simple-file-share-system","posts\u002F2025\u002FA simple file share system","2025-01-07 11:42:03",{"title":102,"path":103,"stem":104,"date":105,"type":81,"children":-1},"【翻译】前端测试指南：命名测试的 10 条基本规则","\u002Fposts\u002F2025\u002Ffrontend-testing-guide-10-essential-rules-for-naming-tests","posts\u002F2025\u002FFrontend Testing Guide - 10 Essential Rules for Naming Tests","2025-01-10 14:31:21",1789642590931]