[{"data":1,"prerenderedAt":151},["ShallowReactive",2],{"blog-\u002Fblog\u002Ffather-to-son":3},{"id":4,"title":5,"body":6,"description":127,"extension":128,"meta":129,"navigation":139,"ogImage":140,"path":142,"robots":143,"schemaOrg":144,"seo":147,"sitemap":148,"stem":149,"__hash__":150},"content\u002Fblog\u002Ffather-to-son.md","沒有一定要用Pinia? 簡單說對資料管理的理解",{"type":7,"value":8,"toc":119},"minimark",[9,18,22,37,41,56,67,71,82,96,106,109,112],[10,11,12,13,17],"p",{},"先打個預防針，本文是建立在",[14,15,16],"strong",{},"基礎不足及可能沒有搞懂工具的目的","產生的錯誤用法，請斟酌壓抑怒火XD",[19,20,21],"h2",{"id":21},"前言",[10,23,24,25,28,29,32,33,36],{},"會有這個體悟是來自於在做 side project 時知道 ",[14,26,27],{},"tanstack query"," 這個工具後，對於",[14,30,31],{},"非同步的資料處理","有了進一步的認識後，也讓我想到，以前是否都",[14,34,35],{},"搞錯Pinia的使用方式","呢?",[19,38,40],{"id":39},"原本我的使用方式","原本我的使用方式?",[10,42,43,44,47,48,51,52,55],{},"原本在寫 Vue 時，會",[14,45,46],{},"無腦的導入後並將各模組所需要的資料、方法做包裝進 store","，完全沒有考慮到",[14,49,50],{},"這些資料是不是其他非父子模組的地方也需要","，只覺得這樣包起來很有規矩(?\n認知提升(?\n當認知稍微提升之後想到，",[14,53,54],{},"既然我沒有其他模組要用，為什麼不用 props 傳進去就好?"," 幹嘛寫一個store 增加維護成本跟記憶體負擔?",[10,57,58,59,62,63,66],{},"還有一點是，如果資料來源是透過 API 拿到的，",[14,60,61],{},"我該怎麼保證拿到的資料都是最新的?"," ",[14,64,65],{},"無法掌握資料更新的地方就是個風險","，變成每次其實還是要打一次API去確保拿到的資料是最新的。",[19,68,70],{"id":69},"後來我怎麼做","後來我怎麼做?",[10,72,73,74,77,78,81],{},"當有了上面的想法後，我思考",[14,75,76],{},"是不是我原本對於模組資料傳遞的設計就是錯誤的","，所以開始在每次開發前",[14,79,80],{},"先著墨在資料傳遞上而不是一昧的寫程式","。",[10,83,84,85,88,89,92,93,81],{},"假設我很明確的知道A、B模組互為父子模組，那就",[14,86,87],{},"在父模組宣告變數即可，子模組需要什麼傳下去即可","。\n",[14,90,91],{},"可以控管資料來源是單一的","，也因為其他模組根本也沒有要使用到，",[14,94,95],{},"等卸載組件後就釋出記憶體了",[10,97,98,99,102,103,81],{},"也意識到",[14,100,101],{},"既然在沒有做快取的情況下，那不同模組拿相同資料就直接打API拿就好","，根本也不用特別存起來，",[14,104,105],{},"如此一來也不用擔心重新整理後資料被洗掉、資料是否不同步的情況",[10,107,108],{},"當然這時知道有個工具叫 tanstack query 可以做這件事情可能有更好的處理方式又是另外一回事了。",[19,110,111],{"id":111},"結語",[10,113,114,115,118],{},"從這件事情後我學到一件事情，",[14,116,117],{},"永遠要清楚知道自己使用的工具設計的目的是什麼","XD (還有要讀官方文件)",{"title":120,"searchDepth":121,"depth":121,"links":122},"",2,[123,124,125,126],{"id":21,"depth":121,"text":21},{"id":39,"depth":121,"text":40},{"id":69,"depth":121,"text":70},{"id":111,"depth":121,"text":111},"反思是否濫用工具或是思考是否因為工具而固化。","md",{"date":130,"category":131,"tags":132,"headline":134,"author":135,"datePublished":138},"2026-07-25","Frontend",[133,131],"Vue3","前端資料管理",{"@type":136,"name":137},"Person","Jamespig","206-07-25",true,{"url":141},"https:\u002F\u002Fimage.jamespig.com\u002FFather-To-Son.pn","\u002Fblog\u002Ffather-to-son",null,[145],{"@type":146},"TechArticle",{"title":5,"description":127},{"loc":142,"lastmod":130},"blog\u002Ffather-to-son","lEzdt4DniULzN-kY4K2vKdLM1iaMCafpm5uJGt1r6Q0",1784961132500]