[{"data":1,"prerenderedAt":3353},["ShallowReactive",2],{"content-query-PScaAgqvv3":3},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"date":10,"tags":11,"body":16,"_type":3347,"_id":3348,"_source":3349,"_file":3350,"_stem":3351,"_extension":3352},"/articles/how-i-manage-pinia-stores","articles",false,"","How I manage Pinia stores","Tips and explanations how I tend to manage my state in Pinia stores.","2025.09",[12,13,14,15],"webdev","typescript","vue","pinia",{"type":17,"children":18,"toc":3334},"root",[19,28,34,39,48,53,59,79,84,90,95,316,321,346,358,366,371,384,391,396,697,702,777,800,806,811,816,824,829,835,840,1025,1059,1081,1181,1189,1194,1249,1283,1291,1296,1351,1365,1371,1734,1750,1768,1776,1782,1841,1914,1964,2015,2068,2111,2119,2125,2130,2138,2163,2168,2254,2259,3261,3266,3311,3316,3323,3328],{"type":20,"tag":21,"props":22,"children":24},"element","h2",{"id":23},"intro",[25],{"type":26,"value":27},"text","Intro",{"type":20,"tag":29,"props":30,"children":31},"p",{},[32],{"type":26,"value":33},"Recently I've been creating apps that heavily rely on state management.",{"type":20,"tag":29,"props":35,"children":36},{},[37],{"type":26,"value":38},"Most of the time Pinia is so simple and straightforward that you don't really need to overcomplicate things.",{"type":20,"tag":40,"props":41,"children":42},"blockquote",{},[43],{"type":20,"tag":29,"props":44,"children":45},{},[46],{"type":26,"value":47},"Plain is good.",{"type":20,"tag":29,"props":49,"children":50},{},[51],{"type":26,"value":52},"Still, from time to time I've found myself in a situation that the way my stores were structured felt... wrong.",{"type":20,"tag":21,"props":54,"children":56},{"id":55},"obligatory-disclaimer",[57],{"type":26,"value":58},"Obligatory disclaimer",{"type":20,"tag":40,"props":60,"children":61},{},[62],{"type":20,"tag":29,"props":63,"children":64},{},[65,67,77],{"type":26,"value":66},"For some reason state management is a ",{"type":20,"tag":68,"props":69,"children":70},"em",{},[71],{"type":20,"tag":72,"props":73,"children":74},"strong",{},[75],{"type":26,"value":76},"very",{"type":26,"value":78}," heated topic",{"type":20,"tag":29,"props":80,"children":81},{},[82],{"type":26,"value":83},"As with everything in software development - there is no one true way.\nThings that I will share work for me and my projects. They may not cover your needs, or you may simply not like them.\nThat's ok.",{"type":20,"tag":21,"props":85,"children":87},{"id":86},"why-is-this-public",[88],{"type":26,"value":89},"Why is this public?",{"type":20,"tag":29,"props":91,"children":92},{},[93],{"type":26,"value":94},"By design everything you want to become state must be returned from the store definition function.",{"type":20,"tag":96,"props":97,"children":100},"pre",{"className":98,"code":99,"language":13,"meta":7,"style":7},"language-typescript shiki shiki-themes one-dark-pro","defineStore('store', () => {\n    const somethingPrivate = ref('foo')\n    const somethingPublic = computed(() => somethingPrivate.value + 'bar')\n  \n    // Even if we call it private it is still visible to anyone\n    // so just don't call it that, okay?\n    return { somethingPrivate, somethingPublic }\n})\n",[101],{"type":20,"tag":102,"props":103,"children":104},"code",{"__ignoreMap":7},[105,145,185,245,254,264,273,307],{"type":20,"tag":106,"props":107,"children":110},"span",{"class":108,"line":109},"line",1,[111,117,123,129,134,140],{"type":20,"tag":106,"props":112,"children":114},{"style":113},"--shiki-default:#61AFEF",[115],{"type":26,"value":116},"defineStore",{"type":20,"tag":106,"props":118,"children":120},{"style":119},"--shiki-default:#ABB2BF",[121],{"type":26,"value":122},"(",{"type":20,"tag":106,"props":124,"children":126},{"style":125},"--shiki-default:#98C379",[127],{"type":26,"value":128},"'store'",{"type":20,"tag":106,"props":130,"children":131},{"style":119},[132],{"type":26,"value":133},", () ",{"type":20,"tag":106,"props":135,"children":137},{"style":136},"--shiki-default:#C678DD",[138],{"type":26,"value":139},"=>",{"type":20,"tag":106,"props":141,"children":142},{"style":119},[143],{"type":26,"value":144}," {\n",{"type":20,"tag":106,"props":146,"children":148},{"class":108,"line":147},2,[149,154,160,166,171,175,180],{"type":20,"tag":106,"props":150,"children":151},{"style":136},[152],{"type":26,"value":153},"    const",{"type":20,"tag":106,"props":155,"children":157},{"style":156},"--shiki-default:#E5C07B",[158],{"type":26,"value":159}," somethingPrivate",{"type":20,"tag":106,"props":161,"children":163},{"style":162},"--shiki-default:#56B6C2",[164],{"type":26,"value":165}," =",{"type":20,"tag":106,"props":167,"children":168},{"style":113},[169],{"type":26,"value":170}," ref",{"type":20,"tag":106,"props":172,"children":173},{"style":119},[174],{"type":26,"value":122},{"type":20,"tag":106,"props":176,"children":177},{"style":125},[178],{"type":26,"value":179},"'foo'",{"type":20,"tag":106,"props":181,"children":182},{"style":119},[183],{"type":26,"value":184},")\n",{"type":20,"tag":106,"props":186,"children":188},{"class":108,"line":187},3,[189,193,198,202,207,212,216,220,225,231,236,241],{"type":20,"tag":106,"props":190,"children":191},{"style":136},[192],{"type":26,"value":153},{"type":20,"tag":106,"props":194,"children":195},{"style":156},[196],{"type":26,"value":197}," somethingPublic",{"type":20,"tag":106,"props":199,"children":200},{"style":162},[201],{"type":26,"value":165},{"type":20,"tag":106,"props":203,"children":204},{"style":113},[205],{"type":26,"value":206}," computed",{"type":20,"tag":106,"props":208,"children":209},{"style":119},[210],{"type":26,"value":211},"(() ",{"type":20,"tag":106,"props":213,"children":214},{"style":136},[215],{"type":26,"value":139},{"type":20,"tag":106,"props":217,"children":218},{"style":156},[219],{"type":26,"value":159},{"type":20,"tag":106,"props":221,"children":222},{"style":119},[223],{"type":26,"value":224},".",{"type":20,"tag":106,"props":226,"children":228},{"style":227},"--shiki-default:#E06C75",[229],{"type":26,"value":230},"value",{"type":20,"tag":106,"props":232,"children":233},{"style":162},[234],{"type":26,"value":235}," +",{"type":20,"tag":106,"props":237,"children":238},{"style":125},[239],{"type":26,"value":240}," 'bar'",{"type":20,"tag":106,"props":242,"children":243},{"style":119},[244],{"type":26,"value":184},{"type":20,"tag":106,"props":246,"children":248},{"class":108,"line":247},4,[249],{"type":20,"tag":106,"props":250,"children":251},{"style":119},[252],{"type":26,"value":253},"  \n",{"type":20,"tag":106,"props":255,"children":257},{"class":108,"line":256},5,[258],{"type":20,"tag":106,"props":259,"children":261},{"style":260},"--shiki-default:#7F848E;--shiki-default-font-style:italic",[262],{"type":26,"value":263},"    // Even if we call it private it is still visible to anyone\n",{"type":20,"tag":106,"props":265,"children":267},{"class":108,"line":266},6,[268],{"type":20,"tag":106,"props":269,"children":270},{"style":260},[271],{"type":26,"value":272},"    // so just don't call it that, okay?\n",{"type":20,"tag":106,"props":274,"children":276},{"class":108,"line":275},7,[277,282,287,292,297,302],{"type":20,"tag":106,"props":278,"children":279},{"style":136},[280],{"type":26,"value":281},"    return",{"type":20,"tag":106,"props":283,"children":284},{"style":119},[285],{"type":26,"value":286}," { ",{"type":20,"tag":106,"props":288,"children":289},{"style":227},[290],{"type":26,"value":291},"somethingPrivate",{"type":20,"tag":106,"props":293,"children":294},{"style":119},[295],{"type":26,"value":296},", ",{"type":20,"tag":106,"props":298,"children":299},{"style":227},[300],{"type":26,"value":301},"somethingPublic",{"type":20,"tag":106,"props":303,"children":304},{"style":119},[305],{"type":26,"value":306}," }\n",{"type":20,"tag":106,"props":308,"children":310},{"class":108,"line":309},8,[311],{"type":20,"tag":106,"props":312,"children":313},{"style":119},[314],{"type":26,"value":315},"})\n",{"type":20,"tag":29,"props":317,"children":318},{},[319],{"type":26,"value":320},"If we do not return something from the store it will cause problems with devtools and plugins.\nOh, and it will break during SSR. So overall a nightmare.",{"type":20,"tag":40,"props":322,"children":323},{},[324],{"type":20,"tag":29,"props":325,"children":326},{},[327,329,344],{"type":26,"value":328},"So, just return every state ",{"type":20,"tag":102,"props":330,"children":333},{"className":331,"language":332,"style":7},"language-ts shiki shiki-themes one-dark-pro","ts",[334,339],{"type":20,"tag":106,"props":335,"children":336},{"style":113},[337],{"type":26,"value":338},"ref",{"type":20,"tag":106,"props":340,"children":341},{"style":119},[342],{"type":26,"value":343},"()",{"type":26,"value":345}," that is part of the store kids.",{"type":20,"tag":29,"props":347,"children":348},{},[349,351],{"type":26,"value":350},"I know it is not a big deal, if it's in your app that you control you can simply not use ",{"type":20,"tag":102,"props":352,"children":353},{"className":331,"language":332,"style":7},[354],{"type":20,"tag":106,"props":355,"children":356},{"style":227},[357],{"type":26,"value":291},{"type":20,"tag":29,"props":359,"children":360},{},[361],{"type":20,"tag":72,"props":362,"children":363},{},[364],{"type":26,"value":365},"BUT",{"type":20,"tag":29,"props":367,"children":368},{},[369],{"type":26,"value":370},"It pollutes the store's interface with things that you shouldn't even use. We don't like messy stores over here.",{"type":20,"tag":40,"props":372,"children":373},{},[374,379],{"type":20,"tag":29,"props":375,"children":376},{},[377],{"type":26,"value":378},"So instead we will overcomplicate things a bit for the sake of simplicity",{"type":20,"tag":29,"props":380,"children":381},{},[382],{"type":26,"value":383},"Just a tiny bit I promise",{"type":20,"tag":385,"props":386,"children":388},"h3",{"id":387},"the-make-it-double-way",[389],{"type":26,"value":390},"The \"make it double\" way",{"type":20,"tag":29,"props":392,"children":393},{},[394],{"type":26,"value":395},"To overcome this you can create something called \"private store\"",{"type":20,"tag":96,"props":397,"children":399},{"className":98,"code":398,"language":13,"meta":7,"style":7},"const privateStore = defineStore('_store', () => {\n  const somethingPrivate = ref('foo')\n  \n  return { somethingPrivate }\n})\n\nexport const publicStore = defineStore('store', () => {\n  const { somethingPrivate } = privateStore()\n  \n  const somethingPublic = computed(() => somethingPrivate.value + 'bar')\n  \n  return { somethingPublic }\n})\n",[400],{"type":20,"tag":102,"props":401,"children":402},{"__ignoreMap":7},[403,446,478,485,505,512,521,567,601,609,661,669,689],{"type":20,"tag":106,"props":404,"children":405},{"class":108,"line":109},[406,411,416,420,425,429,434,438,442],{"type":20,"tag":106,"props":407,"children":408},{"style":136},[409],{"type":26,"value":410},"const",{"type":20,"tag":106,"props":412,"children":413},{"style":156},[414],{"type":26,"value":415}," privateStore",{"type":20,"tag":106,"props":417,"children":418},{"style":162},[419],{"type":26,"value":165},{"type":20,"tag":106,"props":421,"children":422},{"style":113},[423],{"type":26,"value":424}," defineStore",{"type":20,"tag":106,"props":426,"children":427},{"style":119},[428],{"type":26,"value":122},{"type":20,"tag":106,"props":430,"children":431},{"style":125},[432],{"type":26,"value":433},"'_store'",{"type":20,"tag":106,"props":435,"children":436},{"style":119},[437],{"type":26,"value":133},{"type":20,"tag":106,"props":439,"children":440},{"style":136},[441],{"type":26,"value":139},{"type":20,"tag":106,"props":443,"children":444},{"style":119},[445],{"type":26,"value":144},{"type":20,"tag":106,"props":447,"children":448},{"class":108,"line":147},[449,454,458,462,466,470,474],{"type":20,"tag":106,"props":450,"children":451},{"style":136},[452],{"type":26,"value":453},"  const",{"type":20,"tag":106,"props":455,"children":456},{"style":156},[457],{"type":26,"value":159},{"type":20,"tag":106,"props":459,"children":460},{"style":162},[461],{"type":26,"value":165},{"type":20,"tag":106,"props":463,"children":464},{"style":113},[465],{"type":26,"value":170},{"type":20,"tag":106,"props":467,"children":468},{"style":119},[469],{"type":26,"value":122},{"type":20,"tag":106,"props":471,"children":472},{"style":125},[473],{"type":26,"value":179},{"type":20,"tag":106,"props":475,"children":476},{"style":119},[477],{"type":26,"value":184},{"type":20,"tag":106,"props":479,"children":480},{"class":108,"line":187},[481],{"type":20,"tag":106,"props":482,"children":483},{"style":119},[484],{"type":26,"value":253},{"type":20,"tag":106,"props":486,"children":487},{"class":108,"line":247},[488,493,497,501],{"type":20,"tag":106,"props":489,"children":490},{"style":136},[491],{"type":26,"value":492},"  return",{"type":20,"tag":106,"props":494,"children":495},{"style":119},[496],{"type":26,"value":286},{"type":20,"tag":106,"props":498,"children":499},{"style":227},[500],{"type":26,"value":291},{"type":20,"tag":106,"props":502,"children":503},{"style":119},[504],{"type":26,"value":306},{"type":20,"tag":106,"props":506,"children":507},{"class":108,"line":256},[508],{"type":20,"tag":106,"props":509,"children":510},{"style":119},[511],{"type":26,"value":315},{"type":20,"tag":106,"props":513,"children":514},{"class":108,"line":266},[515],{"type":20,"tag":106,"props":516,"children":518},{"emptyLinePlaceholder":517},true,[519],{"type":26,"value":520},"\n",{"type":20,"tag":106,"props":522,"children":523},{"class":108,"line":275},[524,529,534,539,543,547,551,555,559,563],{"type":20,"tag":106,"props":525,"children":526},{"style":136},[527],{"type":26,"value":528},"export",{"type":20,"tag":106,"props":530,"children":531},{"style":136},[532],{"type":26,"value":533}," const",{"type":20,"tag":106,"props":535,"children":536},{"style":156},[537],{"type":26,"value":538}," publicStore",{"type":20,"tag":106,"props":540,"children":541},{"style":162},[542],{"type":26,"value":165},{"type":20,"tag":106,"props":544,"children":545},{"style":113},[546],{"type":26,"value":424},{"type":20,"tag":106,"props":548,"children":549},{"style":119},[550],{"type":26,"value":122},{"type":20,"tag":106,"props":552,"children":553},{"style":125},[554],{"type":26,"value":128},{"type":20,"tag":106,"props":556,"children":557},{"style":119},[558],{"type":26,"value":133},{"type":20,"tag":106,"props":560,"children":561},{"style":136},[562],{"type":26,"value":139},{"type":20,"tag":106,"props":564,"children":565},{"style":119},[566],{"type":26,"value":144},{"type":20,"tag":106,"props":568,"children":569},{"class":108,"line":309},[570,574,578,582,587,592,596],{"type":20,"tag":106,"props":571,"children":572},{"style":136},[573],{"type":26,"value":453},{"type":20,"tag":106,"props":575,"children":576},{"style":119},[577],{"type":26,"value":286},{"type":20,"tag":106,"props":579,"children":580},{"style":156},[581],{"type":26,"value":291},{"type":20,"tag":106,"props":583,"children":584},{"style":119},[585],{"type":26,"value":586}," } ",{"type":20,"tag":106,"props":588,"children":589},{"style":162},[590],{"type":26,"value":591},"=",{"type":20,"tag":106,"props":593,"children":594},{"style":113},[595],{"type":26,"value":415},{"type":20,"tag":106,"props":597,"children":598},{"style":119},[599],{"type":26,"value":600},"()\n",{"type":20,"tag":106,"props":602,"children":604},{"class":108,"line":603},9,[605],{"type":20,"tag":106,"props":606,"children":607},{"style":119},[608],{"type":26,"value":253},{"type":20,"tag":106,"props":610,"children":612},{"class":108,"line":611},10,[613,617,621,625,629,633,637,641,645,649,653,657],{"type":20,"tag":106,"props":614,"children":615},{"style":136},[616],{"type":26,"value":453},{"type":20,"tag":106,"props":618,"children":619},{"style":156},[620],{"type":26,"value":197},{"type":20,"tag":106,"props":622,"children":623},{"style":162},[624],{"type":26,"value":165},{"type":20,"tag":106,"props":626,"children":627},{"style":113},[628],{"type":26,"value":206},{"type":20,"tag":106,"props":630,"children":631},{"style":119},[632],{"type":26,"value":211},{"type":20,"tag":106,"props":634,"children":635},{"style":136},[636],{"type":26,"value":139},{"type":20,"tag":106,"props":638,"children":639},{"style":156},[640],{"type":26,"value":159},{"type":20,"tag":106,"props":642,"children":643},{"style":119},[644],{"type":26,"value":224},{"type":20,"tag":106,"props":646,"children":647},{"style":227},[648],{"type":26,"value":230},{"type":20,"tag":106,"props":650,"children":651},{"style":162},[652],{"type":26,"value":235},{"type":20,"tag":106,"props":654,"children":655},{"style":125},[656],{"type":26,"value":240},{"type":20,"tag":106,"props":658,"children":659},{"style":119},[660],{"type":26,"value":184},{"type":20,"tag":106,"props":662,"children":664},{"class":108,"line":663},11,[665],{"type":20,"tag":106,"props":666,"children":667},{"style":119},[668],{"type":26,"value":253},{"type":20,"tag":106,"props":670,"children":672},{"class":108,"line":671},12,[673,677,681,685],{"type":20,"tag":106,"props":674,"children":675},{"style":136},[676],{"type":26,"value":492},{"type":20,"tag":106,"props":678,"children":679},{"style":119},[680],{"type":26,"value":286},{"type":20,"tag":106,"props":682,"children":683},{"style":227},[684],{"type":26,"value":301},{"type":20,"tag":106,"props":686,"children":687},{"style":119},[688],{"type":26,"value":306},{"type":20,"tag":106,"props":690,"children":692},{"class":108,"line":691},13,[693],{"type":20,"tag":106,"props":694,"children":695},{"style":119},[696],{"type":26,"value":315},{"type":20,"tag":29,"props":698,"children":699},{},[700],{"type":26,"value":701},"So a couple of things here:",{"type":20,"tag":703,"props":704,"children":705},"ol",{},[706,719,740,763],{"type":20,"tag":707,"props":708,"children":709},"li",{},[710,712,717],{"type":26,"value":711},"Now we have ",{"type":20,"tag":72,"props":713,"children":714},{},[715],{"type":26,"value":716},"two",{"type":26,"value":718}," stores but only one is exported",{"type":20,"tag":707,"props":720,"children":721},{},[722,724,732,734,738],{"type":26,"value":723},"The private store is prefixed with ",{"type":20,"tag":102,"props":725,"children":726},{"className":331,"language":332,"style":7},[727],{"type":20,"tag":106,"props":728,"children":729},{"style":227},[730],{"type":26,"value":731},"_",{"type":26,"value":733}," to indicate that it is private",{"type":20,"tag":735,"props":736,"children":737},"br",{},[],{"type":26,"value":739},"\nIt doesn't really matter what you name it, that's how I do it.",{"type":20,"tag":707,"props":741,"children":742},{},[743,745,753,755],{"type":26,"value":744},"We use ",{"type":20,"tag":102,"props":746,"children":747},{"className":331,"language":332,"style":7},[748],{"type":20,"tag":106,"props":749,"children":750},{"style":227},[751],{"type":26,"value":752},"privateStore",{"type":26,"value":754}," only inside the ",{"type":20,"tag":102,"props":756,"children":757},{"className":331,"language":332,"style":7},[758],{"type":20,"tag":106,"props":759,"children":760},{"style":227},[761],{"type":26,"value":762},"publicStore",{"type":20,"tag":707,"props":764,"children":765},{},[766,768,775],{"type":26,"value":767},"Now ",{"type":20,"tag":102,"props":769,"children":770},{"className":331,"language":332,"style":7},[771],{"type":20,"tag":106,"props":772,"children":773},{"style":227},[774],{"type":26,"value":762},{"type":26,"value":776}," can decide what it exposes to the public",{"type":20,"tag":29,"props":778,"children":779},{},[780,782,789,791,798],{"type":26,"value":781},"This way if we do not expose ",{"type":20,"tag":102,"props":783,"children":784},{"className":331,"language":332,"style":7},[785],{"type":20,"tag":106,"props":786,"children":787},{"style":227},[788],{"type":26,"value":291},{"type":26,"value":790}," directly it won't be visible\nor even mutable from ",{"type":20,"tag":102,"props":792,"children":793},{"className":331,"language":332,"style":7},[794],{"type":20,"tag":106,"props":795,"children":796},{"style":227},[797],{"type":26,"value":762},{"type":26,"value":799},"'s properties perspective.",{"type":20,"tag":385,"props":801,"children":803},{"id":802},"why-i-do-it",[804],{"type":26,"value":805},"Why I do it?",{"type":20,"tag":29,"props":807,"children":808},{},[809],{"type":26,"value":810},"I think it separates concerns quite nicely. We can store our data in an entirely different way than we expose it.",{"type":20,"tag":29,"props":812,"children":813},{},[814],{"type":26,"value":815},"We can have setters or actions that modify the private state and expose only them.\nIt reduces the possibility of errors caused by mutating the store in a funky way.",{"type":20,"tag":40,"props":817,"children":818},{},[819],{"type":20,"tag":29,"props":820,"children":821},{},[822],{"type":26,"value":823},"It also just feels right to me, you know?",{"type":20,"tag":29,"props":825,"children":826},{},[827],{"type":26,"value":828},"Sometimes it just feels better to do things in a certain way. That's what happened here for me.",{"type":20,"tag":21,"props":830,"children":832},{"id":831},"storetorefs-is-nice-but-annoying",[833],{"type":26,"value":834},"storeToRefs is nice but annoying",{"type":20,"tag":29,"props":836,"children":837},{},[838],{"type":26,"value":839},"Let's say we have a store like this:",{"type":20,"tag":96,"props":841,"children":843},{"className":98,"code":842,"language":13,"meta":7,"style":7},"const useOurStore = defineStore('store', () => {\n    const foo = ref('foo')\n    \n    function barrify() {\n        return foo.value + 'bar'\n    }\n    \n    return { foo, barrify }\n})\n",[844],{"type":20,"tag":102,"props":845,"children":846},{"__ignoreMap":7},[847,887,919,927,945,974,982,989,1018],{"type":20,"tag":106,"props":848,"children":849},{"class":108,"line":109},[850,854,859,863,867,871,875,879,883],{"type":20,"tag":106,"props":851,"children":852},{"style":136},[853],{"type":26,"value":410},{"type":20,"tag":106,"props":855,"children":856},{"style":156},[857],{"type":26,"value":858}," useOurStore",{"type":20,"tag":106,"props":860,"children":861},{"style":162},[862],{"type":26,"value":165},{"type":20,"tag":106,"props":864,"children":865},{"style":113},[866],{"type":26,"value":424},{"type":20,"tag":106,"props":868,"children":869},{"style":119},[870],{"type":26,"value":122},{"type":20,"tag":106,"props":872,"children":873},{"style":125},[874],{"type":26,"value":128},{"type":20,"tag":106,"props":876,"children":877},{"style":119},[878],{"type":26,"value":133},{"type":20,"tag":106,"props":880,"children":881},{"style":136},[882],{"type":26,"value":139},{"type":20,"tag":106,"props":884,"children":885},{"style":119},[886],{"type":26,"value":144},{"type":20,"tag":106,"props":888,"children":889},{"class":108,"line":147},[890,894,899,903,907,911,915],{"type":20,"tag":106,"props":891,"children":892},{"style":136},[893],{"type":26,"value":153},{"type":20,"tag":106,"props":895,"children":896},{"style":156},[897],{"type":26,"value":898}," foo",{"type":20,"tag":106,"props":900,"children":901},{"style":162},[902],{"type":26,"value":165},{"type":20,"tag":106,"props":904,"children":905},{"style":113},[906],{"type":26,"value":170},{"type":20,"tag":106,"props":908,"children":909},{"style":119},[910],{"type":26,"value":122},{"type":20,"tag":106,"props":912,"children":913},{"style":125},[914],{"type":26,"value":179},{"type":20,"tag":106,"props":916,"children":917},{"style":119},[918],{"type":26,"value":184},{"type":20,"tag":106,"props":920,"children":921},{"class":108,"line":187},[922],{"type":20,"tag":106,"props":923,"children":924},{"style":119},[925],{"type":26,"value":926},"    \n",{"type":20,"tag":106,"props":928,"children":929},{"class":108,"line":247},[930,935,940],{"type":20,"tag":106,"props":931,"children":932},{"style":136},[933],{"type":26,"value":934},"    function",{"type":20,"tag":106,"props":936,"children":937},{"style":113},[938],{"type":26,"value":939}," barrify",{"type":20,"tag":106,"props":941,"children":942},{"style":119},[943],{"type":26,"value":944},"() {\n",{"type":20,"tag":106,"props":946,"children":947},{"class":108,"line":256},[948,953,957,961,965,969],{"type":20,"tag":106,"props":949,"children":950},{"style":136},[951],{"type":26,"value":952},"        return",{"type":20,"tag":106,"props":954,"children":955},{"style":156},[956],{"type":26,"value":898},{"type":20,"tag":106,"props":958,"children":959},{"style":119},[960],{"type":26,"value":224},{"type":20,"tag":106,"props":962,"children":963},{"style":227},[964],{"type":26,"value":230},{"type":20,"tag":106,"props":966,"children":967},{"style":162},[968],{"type":26,"value":235},{"type":20,"tag":106,"props":970,"children":971},{"style":125},[972],{"type":26,"value":973}," 'bar'\n",{"type":20,"tag":106,"props":975,"children":976},{"class":108,"line":266},[977],{"type":20,"tag":106,"props":978,"children":979},{"style":119},[980],{"type":26,"value":981},"    }\n",{"type":20,"tag":106,"props":983,"children":984},{"class":108,"line":275},[985],{"type":20,"tag":106,"props":986,"children":987},{"style":119},[988],{"type":26,"value":926},{"type":20,"tag":106,"props":990,"children":991},{"class":108,"line":309},[992,996,1000,1005,1009,1014],{"type":20,"tag":106,"props":993,"children":994},{"style":136},[995],{"type":26,"value":281},{"type":20,"tag":106,"props":997,"children":998},{"style":119},[999],{"type":26,"value":286},{"type":20,"tag":106,"props":1001,"children":1002},{"style":227},[1003],{"type":26,"value":1004},"foo",{"type":20,"tag":106,"props":1006,"children":1007},{"style":119},[1008],{"type":26,"value":296},{"type":20,"tag":106,"props":1010,"children":1011},{"style":227},[1012],{"type":26,"value":1013},"barrify",{"type":20,"tag":106,"props":1015,"children":1016},{"style":119},[1017],{"type":26,"value":306},{"type":20,"tag":106,"props":1019,"children":1020},{"class":108,"line":603},[1021],{"type":20,"tag":106,"props":1022,"children":1023},{"style":119},[1024],{"type":26,"value":315},{"type":20,"tag":29,"props":1026,"children":1027},{},[1028,1030,1048,1050,1057],{"type":26,"value":1029},"By default ",{"type":20,"tag":102,"props":1031,"children":1032},{"className":331,"language":332,"style":7},[1033,1038,1043],{"type":20,"tag":106,"props":1034,"children":1035},{"style":113},[1036],{"type":26,"value":1037},"useOurStore",{"type":20,"tag":106,"props":1039,"children":1040},{"style":119},[1041],{"type":26,"value":1042},"().",{"type":20,"tag":106,"props":1044,"children":1045},{"style":227},[1046],{"type":26,"value":1047},"ourVariable",{"type":26,"value":1049}," is not a ",{"type":20,"tag":102,"props":1051,"children":1052},{"className":331,"language":332,"style":7},[1053],{"type":20,"tag":106,"props":1054,"children":1055},{"style":227},[1056],{"type":26,"value":338},{"type":26,"value":1058}," so we loose all the goodies that come with it.",{"type":20,"tag":40,"props":1060,"children":1061},{},[1062],{"type":20,"tag":29,"props":1063,"children":1064},{},[1065,1067,1079],{"type":26,"value":1066},"But wait, there is ",{"type":20,"tag":102,"props":1068,"children":1069},{"className":331,"language":332,"style":7},[1070,1075],{"type":20,"tag":106,"props":1071,"children":1072},{"style":113},[1073],{"type":26,"value":1074},"storeToRefs",{"type":20,"tag":106,"props":1076,"children":1077},{"style":119},[1078],{"type":26,"value":343},{"type":26,"value":1080}," that does exactly that",{"type":20,"tag":96,"props":1082,"children":1084},{"className":98,"code":1083,"language":13,"meta":7,"style":7},"const ourStore = useOurStore()\nconst { foo } = storeToRefs(ourStore)\nconst { barrify } = ourStore\n",[1085],{"type":20,"tag":102,"props":1086,"children":1087},{"__ignoreMap":7},[1088,1112,1153],{"type":20,"tag":106,"props":1089,"children":1090},{"class":108,"line":109},[1091,1095,1100,1104,1108],{"type":20,"tag":106,"props":1092,"children":1093},{"style":136},[1094],{"type":26,"value":410},{"type":20,"tag":106,"props":1096,"children":1097},{"style":156},[1098],{"type":26,"value":1099}," ourStore",{"type":20,"tag":106,"props":1101,"children":1102},{"style":162},[1103],{"type":26,"value":165},{"type":20,"tag":106,"props":1105,"children":1106},{"style":113},[1107],{"type":26,"value":858},{"type":20,"tag":106,"props":1109,"children":1110},{"style":119},[1111],{"type":26,"value":600},{"type":20,"tag":106,"props":1113,"children":1114},{"class":108,"line":147},[1115,1119,1123,1127,1131,1135,1140,1144,1149],{"type":20,"tag":106,"props":1116,"children":1117},{"style":136},[1118],{"type":26,"value":410},{"type":20,"tag":106,"props":1120,"children":1121},{"style":119},[1122],{"type":26,"value":286},{"type":20,"tag":106,"props":1124,"children":1125},{"style":156},[1126],{"type":26,"value":1004},{"type":20,"tag":106,"props":1128,"children":1129},{"style":119},[1130],{"type":26,"value":586},{"type":20,"tag":106,"props":1132,"children":1133},{"style":162},[1134],{"type":26,"value":591},{"type":20,"tag":106,"props":1136,"children":1137},{"style":113},[1138],{"type":26,"value":1139}," storeToRefs",{"type":20,"tag":106,"props":1141,"children":1142},{"style":119},[1143],{"type":26,"value":122},{"type":20,"tag":106,"props":1145,"children":1146},{"style":227},[1147],{"type":26,"value":1148},"ourStore",{"type":20,"tag":106,"props":1150,"children":1151},{"style":119},[1152],{"type":26,"value":184},{"type":20,"tag":106,"props":1154,"children":1155},{"class":108,"line":187},[1156,1160,1164,1168,1172,1176],{"type":20,"tag":106,"props":1157,"children":1158},{"style":136},[1159],{"type":26,"value":410},{"type":20,"tag":106,"props":1161,"children":1162},{"style":119},[1163],{"type":26,"value":286},{"type":20,"tag":106,"props":1165,"children":1166},{"style":156},[1167],{"type":26,"value":1013},{"type":20,"tag":106,"props":1169,"children":1170},{"style":119},[1171],{"type":26,"value":586},{"type":20,"tag":106,"props":1173,"children":1174},{"style":162},[1175],{"type":26,"value":591},{"type":20,"tag":106,"props":1177,"children":1178},{"style":227},[1179],{"type":26,"value":1180}," ourStore\n",{"type":20,"tag":40,"props":1182,"children":1183},{},[1184],{"type":20,"tag":29,"props":1185,"children":1186},{},[1187],{"type":26,"value":1188},"Okay woah... three lines of code? In this economy??",{"type":20,"tag":29,"props":1190,"children":1191},{},[1192],{"type":26,"value":1193},"Why can't we just:",{"type":20,"tag":96,"props":1195,"children":1197},{"className":98,"code":1196,"language":13,"meta":7,"style":7},"const { foo, barrify } = storeToRefs(useOurStore())\n",[1198],{"type":20,"tag":102,"props":1199,"children":1200},{"__ignoreMap":7},[1201],{"type":20,"tag":106,"props":1202,"children":1203},{"class":108,"line":109},[1204,1208,1212,1216,1220,1224,1228,1232,1236,1240,1244],{"type":20,"tag":106,"props":1205,"children":1206},{"style":136},[1207],{"type":26,"value":410},{"type":20,"tag":106,"props":1209,"children":1210},{"style":119},[1211],{"type":26,"value":286},{"type":20,"tag":106,"props":1213,"children":1214},{"style":156},[1215],{"type":26,"value":1004},{"type":20,"tag":106,"props":1217,"children":1218},{"style":119},[1219],{"type":26,"value":296},{"type":20,"tag":106,"props":1221,"children":1222},{"style":156},[1223],{"type":26,"value":1013},{"type":20,"tag":106,"props":1225,"children":1226},{"style":119},[1227],{"type":26,"value":586},{"type":20,"tag":106,"props":1229,"children":1230},{"style":162},[1231],{"type":26,"value":591},{"type":20,"tag":106,"props":1233,"children":1234},{"style":113},[1235],{"type":26,"value":1139},{"type":20,"tag":106,"props":1237,"children":1238},{"style":119},[1239],{"type":26,"value":122},{"type":20,"tag":106,"props":1241,"children":1242},{"style":113},[1243],{"type":26,"value":1037},{"type":20,"tag":106,"props":1245,"children":1246},{"style":119},[1247],{"type":26,"value":1248},"())\n",{"type":20,"tag":29,"props":1250,"children":1251},{},[1252,1254,1265,1267,1274,1276,1282],{"type":26,"value":1253},"That's because ",{"type":20,"tag":102,"props":1255,"children":1256},{"className":331,"language":332,"style":7},[1257,1261],{"type":20,"tag":106,"props":1258,"children":1259},{"style":113},[1260],{"type":26,"value":1074},{"type":20,"tag":106,"props":1262,"children":1263},{"style":119},[1264],{"type":26,"value":343},{"type":26,"value":1266}," only returns state properties. So ",{"type":20,"tag":102,"props":1268,"children":1269},{"className":331,"language":332,"style":7},[1270],{"type":20,"tag":106,"props":1271,"children":1272},{"style":227},[1273],{"type":26,"value":1013},{"type":26,"value":1275}," would be ",{"type":20,"tag":102,"props":1277,"children":1279},{"className":1278},[],[1280],{"type":26,"value":1281},"undefined",{"type":26,"value":224},{"type":20,"tag":40,"props":1284,"children":1285},{},[1286],{"type":20,"tag":29,"props":1287,"children":1288},{},[1289],{"type":26,"value":1290},"Okay fair, but I kinda don't wanna do that every time.",{"type":20,"tag":29,"props":1292,"children":1293},{},[1294],{"type":26,"value":1295},"How about... I don't know...",{"type":20,"tag":96,"props":1297,"children":1299},{"className":98,"code":1298,"language":13,"meta":7,"style":7},"const { foo, barrify } = reactiveStore(useOurStore())\n",[1300],{"type":20,"tag":102,"props":1301,"children":1302},{"__ignoreMap":7},[1303],{"type":20,"tag":106,"props":1304,"children":1305},{"class":108,"line":109},[1306,1310,1314,1318,1322,1326,1330,1334,1339,1343,1347],{"type":20,"tag":106,"props":1307,"children":1308},{"style":136},[1309],{"type":26,"value":410},{"type":20,"tag":106,"props":1311,"children":1312},{"style":119},[1313],{"type":26,"value":286},{"type":20,"tag":106,"props":1315,"children":1316},{"style":156},[1317],{"type":26,"value":1004},{"type":20,"tag":106,"props":1319,"children":1320},{"style":119},[1321],{"type":26,"value":296},{"type":20,"tag":106,"props":1323,"children":1324},{"style":156},[1325],{"type":26,"value":1013},{"type":20,"tag":106,"props":1327,"children":1328},{"style":119},[1329],{"type":26,"value":586},{"type":20,"tag":106,"props":1331,"children":1332},{"style":162},[1333],{"type":26,"value":591},{"type":20,"tag":106,"props":1335,"children":1336},{"style":113},[1337],{"type":26,"value":1338}," reactiveStore",{"type":20,"tag":106,"props":1340,"children":1341},{"style":119},[1342],{"type":26,"value":122},{"type":20,"tag":106,"props":1344,"children":1345},{"style":113},[1346],{"type":26,"value":1037},{"type":20,"tag":106,"props":1348,"children":1349},{"style":119},[1350],{"type":26,"value":1248},{"type":20,"tag":29,"props":1352,"children":1353},{},[1354,1356,1363],{"type":26,"value":1355},"Which would return every state property as a ",{"type":20,"tag":102,"props":1357,"children":1358},{"className":331,"language":332,"style":7},[1359],{"type":20,"tag":106,"props":1360,"children":1361},{"style":227},[1362],{"type":26,"value":338},{"type":26,"value":1364}," and every function as is???\nSounds nice, huh?",{"type":20,"tag":385,"props":1366,"children":1368},{"id":1367},"lets-make-it-happen",[1369],{"type":26,"value":1370},"Let's make it happen",{"type":20,"tag":96,"props":1372,"children":1374},{"className":98,"code":1373,"language":13,"meta":7,"style":7},"import { storeToRefs } from \"pinia\";\nimport type { Store } from \"pinia\";\n\nexport type ReactiveStore\u003CT extends Store> = Omit\u003CT, keyof ReturnType\u003Ctypeof storeToRefs\u003CT>>> & ReturnType\u003Ctypeof storeToRefs\u003CT>>;\n\nexport function reactiveStore\u003CT extends Store>(store: T): ReactiveStore\u003CT> {\n    return {\n        ...store,\n        ...storeToRefs(store)\n    };\n}\n",[1375],{"type":20,"tag":102,"props":1376,"children":1377},{"__ignoreMap":7},[1378,1413,1450,1457,1585,1592,1667,1678,1695,1718,1726],{"type":20,"tag":106,"props":1379,"children":1380},{"class":108,"line":109},[1381,1386,1390,1394,1398,1403,1408],{"type":20,"tag":106,"props":1382,"children":1383},{"style":136},[1384],{"type":26,"value":1385},"import",{"type":20,"tag":106,"props":1387,"children":1388},{"style":119},[1389],{"type":26,"value":286},{"type":20,"tag":106,"props":1391,"children":1392},{"style":227},[1393],{"type":26,"value":1074},{"type":20,"tag":106,"props":1395,"children":1396},{"style":119},[1397],{"type":26,"value":586},{"type":20,"tag":106,"props":1399,"children":1400},{"style":136},[1401],{"type":26,"value":1402},"from",{"type":20,"tag":106,"props":1404,"children":1405},{"style":125},[1406],{"type":26,"value":1407}," \"pinia\"",{"type":20,"tag":106,"props":1409,"children":1410},{"style":119},[1411],{"type":26,"value":1412},";\n",{"type":20,"tag":106,"props":1414,"children":1415},{"class":108,"line":147},[1416,1420,1425,1429,1434,1438,1442,1446],{"type":20,"tag":106,"props":1417,"children":1418},{"style":136},[1419],{"type":26,"value":1385},{"type":20,"tag":106,"props":1421,"children":1422},{"style":136},[1423],{"type":26,"value":1424}," type",{"type":20,"tag":106,"props":1426,"children":1427},{"style":119},[1428],{"type":26,"value":286},{"type":20,"tag":106,"props":1430,"children":1431},{"style":227},[1432],{"type":26,"value":1433},"Store",{"type":20,"tag":106,"props":1435,"children":1436},{"style":119},[1437],{"type":26,"value":586},{"type":20,"tag":106,"props":1439,"children":1440},{"style":136},[1441],{"type":26,"value":1402},{"type":20,"tag":106,"props":1443,"children":1444},{"style":125},[1445],{"type":26,"value":1407},{"type":20,"tag":106,"props":1447,"children":1448},{"style":119},[1449],{"type":26,"value":1412},{"type":20,"tag":106,"props":1451,"children":1452},{"class":108,"line":187},[1453],{"type":20,"tag":106,"props":1454,"children":1455},{"emptyLinePlaceholder":517},[1456],{"type":26,"value":520},{"type":20,"tag":106,"props":1458,"children":1459},{"class":108,"line":247},[1460,1464,1468,1473,1478,1483,1488,1493,1498,1502,1507,1511,1515,1519,1524,1529,1533,1538,1542,1546,1550,1555,1560,1564,1568,1572,1576,1580],{"type":20,"tag":106,"props":1461,"children":1462},{"style":136},[1463],{"type":26,"value":528},{"type":20,"tag":106,"props":1465,"children":1466},{"style":136},[1467],{"type":26,"value":1424},{"type":20,"tag":106,"props":1469,"children":1470},{"style":156},[1471],{"type":26,"value":1472}," ReactiveStore",{"type":20,"tag":106,"props":1474,"children":1475},{"style":119},[1476],{"type":26,"value":1477},"\u003C",{"type":20,"tag":106,"props":1479,"children":1480},{"style":156},[1481],{"type":26,"value":1482},"T",{"type":20,"tag":106,"props":1484,"children":1485},{"style":136},[1486],{"type":26,"value":1487}," extends",{"type":20,"tag":106,"props":1489,"children":1490},{"style":156},[1491],{"type":26,"value":1492}," Store",{"type":20,"tag":106,"props":1494,"children":1495},{"style":119},[1496],{"type":26,"value":1497},"> ",{"type":20,"tag":106,"props":1499,"children":1500},{"style":162},[1501],{"type":26,"value":591},{"type":20,"tag":106,"props":1503,"children":1504},{"style":156},[1505],{"type":26,"value":1506}," Omit",{"type":20,"tag":106,"props":1508,"children":1509},{"style":119},[1510],{"type":26,"value":1477},{"type":20,"tag":106,"props":1512,"children":1513},{"style":156},[1514],{"type":26,"value":1482},{"type":20,"tag":106,"props":1516,"children":1517},{"style":119},[1518],{"type":26,"value":296},{"type":20,"tag":106,"props":1520,"children":1521},{"style":136},[1522],{"type":26,"value":1523},"keyof",{"type":20,"tag":106,"props":1525,"children":1526},{"style":156},[1527],{"type":26,"value":1528}," ReturnType",{"type":20,"tag":106,"props":1530,"children":1531},{"style":119},[1532],{"type":26,"value":1477},{"type":20,"tag":106,"props":1534,"children":1535},{"style":136},[1536],{"type":26,"value":1537},"typeof",{"type":20,"tag":106,"props":1539,"children":1540},{"style":227},[1541],{"type":26,"value":1139},{"type":20,"tag":106,"props":1543,"children":1544},{"style":119},[1545],{"type":26,"value":1477},{"type":20,"tag":106,"props":1547,"children":1548},{"style":156},[1549],{"type":26,"value":1482},{"type":20,"tag":106,"props":1551,"children":1552},{"style":119},[1553],{"type":26,"value":1554},">>> & ",{"type":20,"tag":106,"props":1556,"children":1557},{"style":156},[1558],{"type":26,"value":1559},"ReturnType",{"type":20,"tag":106,"props":1561,"children":1562},{"style":119},[1563],{"type":26,"value":1477},{"type":20,"tag":106,"props":1565,"children":1566},{"style":136},[1567],{"type":26,"value":1537},{"type":20,"tag":106,"props":1569,"children":1570},{"style":227},[1571],{"type":26,"value":1139},{"type":20,"tag":106,"props":1573,"children":1574},{"style":119},[1575],{"type":26,"value":1477},{"type":20,"tag":106,"props":1577,"children":1578},{"style":156},[1579],{"type":26,"value":1482},{"type":20,"tag":106,"props":1581,"children":1582},{"style":119},[1583],{"type":26,"value":1584},">>;\n",{"type":20,"tag":106,"props":1586,"children":1587},{"class":108,"line":256},[1588],{"type":20,"tag":106,"props":1589,"children":1590},{"emptyLinePlaceholder":517},[1591],{"type":26,"value":520},{"type":20,"tag":106,"props":1593,"children":1594},{"class":108,"line":266},[1595,1599,1604,1608,1612,1616,1620,1624,1629,1635,1640,1644,1649,1654,1658,1662],{"type":20,"tag":106,"props":1596,"children":1597},{"style":136},[1598],{"type":26,"value":528},{"type":20,"tag":106,"props":1600,"children":1601},{"style":136},[1602],{"type":26,"value":1603}," function",{"type":20,"tag":106,"props":1605,"children":1606},{"style":113},[1607],{"type":26,"value":1338},{"type":20,"tag":106,"props":1609,"children":1610},{"style":119},[1611],{"type":26,"value":1477},{"type":20,"tag":106,"props":1613,"children":1614},{"style":156},[1615],{"type":26,"value":1482},{"type":20,"tag":106,"props":1617,"children":1618},{"style":136},[1619],{"type":26,"value":1487},{"type":20,"tag":106,"props":1621,"children":1622},{"style":156},[1623],{"type":26,"value":1492},{"type":20,"tag":106,"props":1625,"children":1626},{"style":119},[1627],{"type":26,"value":1628},">(",{"type":20,"tag":106,"props":1630,"children":1632},{"style":1631},"--shiki-default:#E06C75;--shiki-default-font-style:italic",[1633],{"type":26,"value":1634},"store",{"type":20,"tag":106,"props":1636,"children":1637},{"style":119},[1638],{"type":26,"value":1639},": ",{"type":20,"tag":106,"props":1641,"children":1642},{"style":156},[1643],{"type":26,"value":1482},{"type":20,"tag":106,"props":1645,"children":1646},{"style":119},[1647],{"type":26,"value":1648},"): ",{"type":20,"tag":106,"props":1650,"children":1651},{"style":156},[1652],{"type":26,"value":1653},"ReactiveStore",{"type":20,"tag":106,"props":1655,"children":1656},{"style":119},[1657],{"type":26,"value":1477},{"type":20,"tag":106,"props":1659,"children":1660},{"style":156},[1661],{"type":26,"value":1482},{"type":20,"tag":106,"props":1663,"children":1664},{"style":119},[1665],{"type":26,"value":1666},"> {\n",{"type":20,"tag":106,"props":1668,"children":1669},{"class":108,"line":275},[1670,1674],{"type":20,"tag":106,"props":1671,"children":1672},{"style":136},[1673],{"type":26,"value":281},{"type":20,"tag":106,"props":1675,"children":1676},{"style":119},[1677],{"type":26,"value":144},{"type":20,"tag":106,"props":1679,"children":1680},{"class":108,"line":309},[1681,1686,1690],{"type":20,"tag":106,"props":1682,"children":1683},{"style":119},[1684],{"type":26,"value":1685},"        ...",{"type":20,"tag":106,"props":1687,"children":1688},{"style":227},[1689],{"type":26,"value":1634},{"type":20,"tag":106,"props":1691,"children":1692},{"style":119},[1693],{"type":26,"value":1694},",\n",{"type":20,"tag":106,"props":1696,"children":1697},{"class":108,"line":603},[1698,1702,1706,1710,1714],{"type":20,"tag":106,"props":1699,"children":1700},{"style":119},[1701],{"type":26,"value":1685},{"type":20,"tag":106,"props":1703,"children":1704},{"style":113},[1705],{"type":26,"value":1074},{"type":20,"tag":106,"props":1707,"children":1708},{"style":119},[1709],{"type":26,"value":122},{"type":20,"tag":106,"props":1711,"children":1712},{"style":227},[1713],{"type":26,"value":1634},{"type":20,"tag":106,"props":1715,"children":1716},{"style":119},[1717],{"type":26,"value":184},{"type":20,"tag":106,"props":1719,"children":1720},{"class":108,"line":611},[1721],{"type":20,"tag":106,"props":1722,"children":1723},{"style":119},[1724],{"type":26,"value":1725},"    };\n",{"type":20,"tag":106,"props":1727,"children":1728},{"class":108,"line":663},[1729],{"type":20,"tag":106,"props":1730,"children":1731},{"style":119},[1732],{"type":26,"value":1733},"}\n",{"type":20,"tag":40,"props":1735,"children":1736},{},[1737],{"type":20,"tag":29,"props":1738,"children":1739},{},[1740,1742,1748],{"type":26,"value":1741},"Ey! chill about the pitchforks for that ",{"type":20,"tag":102,"props":1743,"children":1745},{"className":1744},[],[1746],{"type":26,"value":1747},"type",{"type":26,"value":1749},". We'll talk about it",{"type":20,"tag":29,"props":1751,"children":1752},{},[1753,1755,1766],{"type":26,"value":1754},"The return statement is pretty straightforward. We spread every property from the store (including actions this time)\nand overwrite state properties with their ",{"type":20,"tag":102,"props":1756,"children":1757},{"className":331,"language":332,"style":7},[1758,1762],{"type":20,"tag":106,"props":1759,"children":1760},{"style":113},[1761],{"type":26,"value":338},{"type":20,"tag":106,"props":1763,"children":1764},{"style":119},[1765],{"type":26,"value":343},{"type":26,"value":1767}," versions.",{"type":20,"tag":40,"props":1769,"children":1770},{},[1771],{"type":20,"tag":29,"props":1772,"children":1773},{},[1774],{"type":26,"value":1775},"So, back to that monstrosity of a type",{"type":20,"tag":385,"props":1777,"children":1779},{"id":1778},"lets-break-it-down",[1780],{"type":26,"value":1781},"Let's break it down:",{"type":20,"tag":96,"props":1783,"children":1785},{"className":98,"code":1784,"language":13,"meta":7,"style":7},"// Generic type that extends Pinia's Store type.\n// That allows us to create types based on the store properties.\nexport type ReactiveStore\u003CT extends Store>\n",[1786],{"type":20,"tag":102,"props":1787,"children":1788},{"__ignoreMap":7},[1789,1797,1805],{"type":20,"tag":106,"props":1790,"children":1791},{"class":108,"line":109},[1792],{"type":20,"tag":106,"props":1793,"children":1794},{"style":260},[1795],{"type":26,"value":1796},"// Generic type that extends Pinia's Store type.\n",{"type":20,"tag":106,"props":1798,"children":1799},{"class":108,"line":147},[1800],{"type":20,"tag":106,"props":1801,"children":1802},{"style":260},[1803],{"type":26,"value":1804},"// That allows us to create types based on the store properties.\n",{"type":20,"tag":106,"props":1806,"children":1807},{"class":108,"line":187},[1808,1812,1816,1820,1824,1828,1832,1836],{"type":20,"tag":106,"props":1809,"children":1810},{"style":136},[1811],{"type":26,"value":528},{"type":20,"tag":106,"props":1813,"children":1814},{"style":136},[1815],{"type":26,"value":1424},{"type":20,"tag":106,"props":1817,"children":1818},{"style":156},[1819],{"type":26,"value":1472},{"type":20,"tag":106,"props":1821,"children":1822},{"style":119},[1823],{"type":26,"value":1477},{"type":20,"tag":106,"props":1825,"children":1826},{"style":156},[1827],{"type":26,"value":1482},{"type":20,"tag":106,"props":1829,"children":1830},{"style":136},[1831],{"type":26,"value":1487},{"type":20,"tag":106,"props":1833,"children":1834},{"style":156},[1835],{"type":26,"value":1492},{"type":20,"tag":106,"props":1837,"children":1838},{"style":119},[1839],{"type":26,"value":1840},">\n",{"type":20,"tag":96,"props":1842,"children":1844},{"className":98,"code":1843,"language":13,"meta":7,"style":7},"// This part gets us every export from the store except state properties.\nOmit\u003CT, keyof ReturnType\u003Ctypeof storeToRefs\u003CT>>>\n",[1845],{"type":20,"tag":102,"props":1846,"children":1847},{"__ignoreMap":7},[1848,1856],{"type":20,"tag":106,"props":1849,"children":1850},{"class":108,"line":109},[1851],{"type":20,"tag":106,"props":1852,"children":1853},{"style":260},[1854],{"type":26,"value":1855},"// This part gets us every export from the store except state properties.\n",{"type":20,"tag":106,"props":1857,"children":1858},{"class":108,"line":147},[1859,1864,1868,1872,1876,1880,1884,1888,1892,1896,1900,1904,1909],{"type":20,"tag":106,"props":1860,"children":1861},{"style":227},[1862],{"type":26,"value":1863},"Omit",{"type":20,"tag":106,"props":1865,"children":1866},{"style":162},[1867],{"type":26,"value":1477},{"type":20,"tag":106,"props":1869,"children":1870},{"style":156},[1871],{"type":26,"value":1482},{"type":20,"tag":106,"props":1873,"children":1874},{"style":119},[1875],{"type":26,"value":296},{"type":20,"tag":106,"props":1877,"children":1878},{"style":227},[1879],{"type":26,"value":1523},{"type":20,"tag":106,"props":1881,"children":1882},{"style":227},[1883],{"type":26,"value":1528},{"type":20,"tag":106,"props":1885,"children":1886},{"style":162},[1887],{"type":26,"value":1477},{"type":20,"tag":106,"props":1889,"children":1890},{"style":136},[1891],{"type":26,"value":1537},{"type":20,"tag":106,"props":1893,"children":1894},{"style":227},[1895],{"type":26,"value":1139},{"type":20,"tag":106,"props":1897,"children":1898},{"style":119},[1899],{"type":26,"value":1477},{"type":20,"tag":106,"props":1901,"children":1902},{"style":156},[1903],{"type":26,"value":1482},{"type":20,"tag":106,"props":1905,"children":1906},{"style":119},[1907],{"type":26,"value":1908},">",{"type":20,"tag":106,"props":1910,"children":1911},{"style":162},[1912],{"type":26,"value":1913},">>\n",{"type":20,"tag":96,"props":1915,"children":1917},{"className":98,"code":1916,"language":13,"meta":7,"style":7},"// And finally this gets us every state property as a ref\nReturnType\u003Ctypeof storeToRefs\u003CT>>\n",[1918],{"type":20,"tag":102,"props":1919,"children":1920},{"__ignoreMap":7},[1921,1929],{"type":20,"tag":106,"props":1922,"children":1923},{"class":108,"line":109},[1924],{"type":20,"tag":106,"props":1925,"children":1926},{"style":260},[1927],{"type":26,"value":1928},"// And finally this gets us every state property as a ref\n",{"type":20,"tag":106,"props":1930,"children":1931},{"class":108,"line":147},[1932,1936,1940,1944,1948,1952,1956,1960],{"type":20,"tag":106,"props":1933,"children":1934},{"style":227},[1935],{"type":26,"value":1559},{"type":20,"tag":106,"props":1937,"children":1938},{"style":162},[1939],{"type":26,"value":1477},{"type":20,"tag":106,"props":1941,"children":1942},{"style":136},[1943],{"type":26,"value":1537},{"type":20,"tag":106,"props":1945,"children":1946},{"style":227},[1947],{"type":26,"value":1139},{"type":20,"tag":106,"props":1949,"children":1950},{"style":119},[1951],{"type":26,"value":1477},{"type":20,"tag":106,"props":1953,"children":1954},{"style":156},[1955],{"type":26,"value":1482},{"type":20,"tag":106,"props":1957,"children":1958},{"style":119},[1959],{"type":26,"value":1908},{"type":20,"tag":106,"props":1961,"children":1962},{"style":162},[1963],{"type":26,"value":1840},{"type":20,"tag":29,"props":1965,"children":1966},{},[1967,1969,2013],{"type":26,"value":1968},"So why not just ",{"type":20,"tag":102,"props":1970,"children":1971},{"className":331,"language":332,"style":7},[1972,1976,1981,1985,1989,1993,1997,2001,2005,2009],{"type":20,"tag":106,"props":1973,"children":1974},{"style":156},[1975],{"type":26,"value":1482},{"type":20,"tag":106,"props":1977,"children":1978},{"style":162},[1979],{"type":26,"value":1980}," &",{"type":20,"tag":106,"props":1982,"children":1983},{"style":227},[1984],{"type":26,"value":1528},{"type":20,"tag":106,"props":1986,"children":1987},{"style":162},[1988],{"type":26,"value":1477},{"type":20,"tag":106,"props":1990,"children":1991},{"style":136},[1992],{"type":26,"value":1537},{"type":20,"tag":106,"props":1994,"children":1995},{"style":227},[1996],{"type":26,"value":1139},{"type":20,"tag":106,"props":1998,"children":1999},{"style":119},[2000],{"type":26,"value":1477},{"type":20,"tag":106,"props":2002,"children":2003},{"style":156},[2004],{"type":26,"value":1482},{"type":20,"tag":106,"props":2006,"children":2007},{"style":119},[2008],{"type":26,"value":1908},{"type":20,"tag":106,"props":2010,"children":2011},{"style":162},[2012],{"type":26,"value":1908},{"type":26,"value":2014},"?",{"type":20,"tag":96,"props":2016,"children":2018},{"className":98,"code":2017,"language":13,"meta":7,"style":7},"// Because this will produce something like this for state property:\nstring & globalThis.ComputedRef\u003Cstring>\n",[2019],{"type":20,"tag":102,"props":2020,"children":2021},{"__ignoreMap":7},[2022,2030],{"type":20,"tag":106,"props":2023,"children":2024},{"class":108,"line":109},[2025],{"type":20,"tag":106,"props":2026,"children":2027},{"style":260},[2028],{"type":26,"value":2029},"// Because this will produce something like this for state property:\n",{"type":20,"tag":106,"props":2031,"children":2032},{"class":108,"line":147},[2033,2038,2042,2047,2051,2056,2060,2064],{"type":20,"tag":106,"props":2034,"children":2035},{"style":227},[2036],{"type":26,"value":2037},"string",{"type":20,"tag":106,"props":2039,"children":2040},{"style":162},[2041],{"type":26,"value":1980},{"type":20,"tag":106,"props":2043,"children":2044},{"style":156},[2045],{"type":26,"value":2046}," globalThis",{"type":20,"tag":106,"props":2048,"children":2049},{"style":119},[2050],{"type":26,"value":224},{"type":20,"tag":106,"props":2052,"children":2053},{"style":227},[2054],{"type":26,"value":2055},"ComputedRef",{"type":20,"tag":106,"props":2057,"children":2058},{"style":162},[2059],{"type":26,"value":1477},{"type":20,"tag":106,"props":2061,"children":2062},{"style":227},[2063],{"type":26,"value":2037},{"type":20,"tag":106,"props":2065,"children":2066},{"style":162},[2067],{"type":26,"value":1840},{"type":20,"tag":96,"props":2069,"children":2071},{"className":98,"code":2070,"language":13,"meta":7,"style":7},"// instead of a nice and clean\nglobalThis.ComputedRef\u003Cstring>\n",[2072],{"type":20,"tag":102,"props":2073,"children":2074},{"__ignoreMap":7},[2075,2083],{"type":20,"tag":106,"props":2076,"children":2077},{"class":108,"line":109},[2078],{"type":20,"tag":106,"props":2079,"children":2080},{"style":260},[2081],{"type":26,"value":2082},"// instead of a nice and clean\n",{"type":20,"tag":106,"props":2084,"children":2085},{"class":108,"line":147},[2086,2091,2095,2099,2103,2107],{"type":20,"tag":106,"props":2087,"children":2088},{"style":156},[2089],{"type":26,"value":2090},"globalThis",{"type":20,"tag":106,"props":2092,"children":2093},{"style":119},[2094],{"type":26,"value":224},{"type":20,"tag":106,"props":2096,"children":2097},{"style":227},[2098],{"type":26,"value":2055},{"type":20,"tag":106,"props":2100,"children":2101},{"style":162},[2102],{"type":26,"value":1477},{"type":20,"tag":106,"props":2104,"children":2105},{"style":227},[2106],{"type":26,"value":2037},{"type":20,"tag":106,"props":2108,"children":2109},{"style":162},[2110],{"type":26,"value":1840},{"type":20,"tag":40,"props":2112,"children":2113},{},[2114],{"type":20,"tag":29,"props":2115,"children":2116},{},[2117],{"type":26,"value":2118},"I'd rather have one messy type than a bunch of messy types",{"type":20,"tag":21,"props":2120,"children":2122},{"id":2121},"lets-use-everything-in-practice",[2123],{"type":26,"value":2124},"Let's use everything in practice",{"type":20,"tag":29,"props":2126,"children":2127},{},[2128],{"type":26,"value":2129},"Recently, I've been working on my personal notes app (as one does from time to time).\nWithout going into too much detail, it's a perfect example of how to use everything we've discussed so far.",{"type":20,"tag":40,"props":2131,"children":2132},{},[2133],{"type":20,"tag":29,"props":2134,"children":2135},{},[2136],{"type":26,"value":2137},"A bonus thing before we continue",{"type":20,"tag":29,"props":2139,"children":2140},{},[2141,2143,2152,2154,2161],{"type":26,"value":2142},"I've stumbled upon a really useful ",{"type":20,"tag":2144,"props":2145,"children":2149},"a",{"href":2146,"rel":2147},"https://www.reddit.com/r/typescript/comments/sittcf/i_struggle_so_much_choosing_between_an_array_of/",[2148],"nofollow",[2150],{"type":26,"value":2151},"post on r/typescript",{"type":26,"value":2153},"\nAnd its ",{"type":20,"tag":2144,"props":2155,"children":2158},{"href":2156,"rel":2157},"https://www.reddit.com/r/typescript/comments/sittcf/comment/hvb0vii/",[2148],[2159],{"type":26,"value":2160},"first comment",{"type":26,"value":2162}," to be specific.",{"type":20,"tag":29,"props":2164,"children":2165},{},[2166],{"type":26,"value":2167},"I'll just quote it here in case it gets lost to time:",{"type":20,"tag":96,"props":2169,"children":2172},{"className":2170,"code":2171,"language":26,"meta":7,"style":7},"language-text shiki shiki-themes one-dark-pro","u/izzlesnizzit on r/typescript  \n\nIf order matters, choose array.  \nIf fast lookup matters, choose object.  \nIf both matter, and the order doesn't change, you can use ES6 Maps  \nIf both matter and order changes, you can have a composite return value like\n{\n  orderedKeys: [...],\n  items: {...}\n}\n",[2173],{"type":20,"tag":102,"props":2174,"children":2175},{"__ignoreMap":7},[2176,2184,2191,2199,2207,2215,2223,2231,2239,2247],{"type":20,"tag":106,"props":2177,"children":2178},{"class":108,"line":109},[2179],{"type":20,"tag":106,"props":2180,"children":2181},{},[2182],{"type":26,"value":2183},"u/izzlesnizzit on r/typescript  \n",{"type":20,"tag":106,"props":2185,"children":2186},{"class":108,"line":147},[2187],{"type":20,"tag":106,"props":2188,"children":2189},{"emptyLinePlaceholder":517},[2190],{"type":26,"value":520},{"type":20,"tag":106,"props":2192,"children":2193},{"class":108,"line":187},[2194],{"type":20,"tag":106,"props":2195,"children":2196},{},[2197],{"type":26,"value":2198},"If order matters, choose array.  \n",{"type":20,"tag":106,"props":2200,"children":2201},{"class":108,"line":247},[2202],{"type":20,"tag":106,"props":2203,"children":2204},{},[2205],{"type":26,"value":2206},"If fast lookup matters, choose object.  \n",{"type":20,"tag":106,"props":2208,"children":2209},{"class":108,"line":256},[2210],{"type":20,"tag":106,"props":2211,"children":2212},{},[2213],{"type":26,"value":2214},"If both matter, and the order doesn't change, you can use ES6 Maps  \n",{"type":20,"tag":106,"props":2216,"children":2217},{"class":108,"line":266},[2218],{"type":20,"tag":106,"props":2219,"children":2220},{},[2221],{"type":26,"value":2222},"If both matter and order changes, you can have a composite return value like\n",{"type":20,"tag":106,"props":2224,"children":2225},{"class":108,"line":275},[2226],{"type":20,"tag":106,"props":2227,"children":2228},{},[2229],{"type":26,"value":2230},"{\n",{"type":20,"tag":106,"props":2232,"children":2233},{"class":108,"line":309},[2234],{"type":20,"tag":106,"props":2235,"children":2236},{},[2237],{"type":26,"value":2238},"  orderedKeys: [...],\n",{"type":20,"tag":106,"props":2240,"children":2241},{"class":108,"line":603},[2242],{"type":20,"tag":106,"props":2243,"children":2244},{},[2245],{"type":26,"value":2246},"  items: {...}\n",{"type":20,"tag":106,"props":2248,"children":2249},{"class":108,"line":611},[2250],{"type":20,"tag":106,"props":2251,"children":2252},{},[2253],{"type":26,"value":1733},{"type":20,"tag":29,"props":2255,"children":2256},{},[2257],{"type":26,"value":2258},"Simplfied version of my notes store:",{"type":20,"tag":96,"props":2260,"children":2262},{"className":98,"code":2261,"language":13,"meta":7,"style":7},"const privateStore = defineStore('_notes', () => {\n    const notesMap = ref\u003CNotes>({})\n    const notesOrder = ref\u003Cstring[]>([])\n\n    return { notesMap, notesOrder }\n})\n\nexport const useNotesStore = defineStore('notes', () => {\n    const { notesMap, notesOrder } = reactiveStore(privateStore());\n\n    const notes = computed(() => {\n        return notesOrder.value.map(uuid => notesMap.value[uuid]);\n    })\n\n    function addNote() {\n        const uuid = crypto.randomUUID();\n        notesMap.value[uuid] = {\n            uuid,\n            text: 'New Note'\n        }\n        notesOrder.value.push(uuid);\n    }\n\n    function changeText(uuid: string, text: string) {\n        if(notesMap.value[uuid]) {\n            notesMap.value[uuid].text = text || 'New Note';\n        }\n    }\n\n    function moveNote(uuid: string, newIndex: number) {\n        const noteIndex = notesOrder.value.indexOf(uuid);\n        notesOrder.value.splice(noteIndex, 1);\n        notesOrder.value.splice(newIndex, 0, uuid);\n    }\n\n    return { notes, addNote, changeText };\n})\n",[2263],{"type":20,"tag":102,"props":2264,"children":2265},{"__ignoreMap":7},[2266,2306,2340,2373,2380,2409,2416,2423,2468,2516,2523,2555,2623,2631,2639,2656,2693,2731,2744,2762,2771,2810,2818,2826,2876,2914,2971,2979,2987,2995,3046,3096,3144,3197,3205,3213,3253],{"type":20,"tag":106,"props":2267,"children":2268},{"class":108,"line":109},[2269,2273,2277,2281,2285,2289,2294,2298,2302],{"type":20,"tag":106,"props":2270,"children":2271},{"style":136},[2272],{"type":26,"value":410},{"type":20,"tag":106,"props":2274,"children":2275},{"style":156},[2276],{"type":26,"value":415},{"type":20,"tag":106,"props":2278,"children":2279},{"style":162},[2280],{"type":26,"value":165},{"type":20,"tag":106,"props":2282,"children":2283},{"style":113},[2284],{"type":26,"value":424},{"type":20,"tag":106,"props":2286,"children":2287},{"style":119},[2288],{"type":26,"value":122},{"type":20,"tag":106,"props":2290,"children":2291},{"style":125},[2292],{"type":26,"value":2293},"'_notes'",{"type":20,"tag":106,"props":2295,"children":2296},{"style":119},[2297],{"type":26,"value":133},{"type":20,"tag":106,"props":2299,"children":2300},{"style":136},[2301],{"type":26,"value":139},{"type":20,"tag":106,"props":2303,"children":2304},{"style":119},[2305],{"type":26,"value":144},{"type":20,"tag":106,"props":2307,"children":2308},{"class":108,"line":147},[2309,2313,2318,2322,2326,2330,2335],{"type":20,"tag":106,"props":2310,"children":2311},{"style":136},[2312],{"type":26,"value":153},{"type":20,"tag":106,"props":2314,"children":2315},{"style":156},[2316],{"type":26,"value":2317}," notesMap",{"type":20,"tag":106,"props":2319,"children":2320},{"style":162},[2321],{"type":26,"value":165},{"type":20,"tag":106,"props":2323,"children":2324},{"style":113},[2325],{"type":26,"value":170},{"type":20,"tag":106,"props":2327,"children":2328},{"style":119},[2329],{"type":26,"value":1477},{"type":20,"tag":106,"props":2331,"children":2332},{"style":156},[2333],{"type":26,"value":2334},"Notes",{"type":20,"tag":106,"props":2336,"children":2337},{"style":119},[2338],{"type":26,"value":2339},">({})\n",{"type":20,"tag":106,"props":2341,"children":2342},{"class":108,"line":187},[2343,2347,2352,2356,2360,2364,2368],{"type":20,"tag":106,"props":2344,"children":2345},{"style":136},[2346],{"type":26,"value":153},{"type":20,"tag":106,"props":2348,"children":2349},{"style":156},[2350],{"type":26,"value":2351}," notesOrder",{"type":20,"tag":106,"props":2353,"children":2354},{"style":162},[2355],{"type":26,"value":165},{"type":20,"tag":106,"props":2357,"children":2358},{"style":113},[2359],{"type":26,"value":170},{"type":20,"tag":106,"props":2361,"children":2362},{"style":119},[2363],{"type":26,"value":1477},{"type":20,"tag":106,"props":2365,"children":2366},{"style":156},[2367],{"type":26,"value":2037},{"type":20,"tag":106,"props":2369,"children":2370},{"style":119},[2371],{"type":26,"value":2372},"[]>([])\n",{"type":20,"tag":106,"props":2374,"children":2375},{"class":108,"line":247},[2376],{"type":20,"tag":106,"props":2377,"children":2378},{"emptyLinePlaceholder":517},[2379],{"type":26,"value":520},{"type":20,"tag":106,"props":2381,"children":2382},{"class":108,"line":256},[2383,2387,2391,2396,2400,2405],{"type":20,"tag":106,"props":2384,"children":2385},{"style":136},[2386],{"type":26,"value":281},{"type":20,"tag":106,"props":2388,"children":2389},{"style":119},[2390],{"type":26,"value":286},{"type":20,"tag":106,"props":2392,"children":2393},{"style":227},[2394],{"type":26,"value":2395},"notesMap",{"type":20,"tag":106,"props":2397,"children":2398},{"style":119},[2399],{"type":26,"value":296},{"type":20,"tag":106,"props":2401,"children":2402},{"style":227},[2403],{"type":26,"value":2404},"notesOrder",{"type":20,"tag":106,"props":2406,"children":2407},{"style":119},[2408],{"type":26,"value":306},{"type":20,"tag":106,"props":2410,"children":2411},{"class":108,"line":266},[2412],{"type":20,"tag":106,"props":2413,"children":2414},{"style":119},[2415],{"type":26,"value":315},{"type":20,"tag":106,"props":2417,"children":2418},{"class":108,"line":275},[2419],{"type":20,"tag":106,"props":2420,"children":2421},{"emptyLinePlaceholder":517},[2422],{"type":26,"value":520},{"type":20,"tag":106,"props":2424,"children":2425},{"class":108,"line":309},[2426,2430,2434,2439,2443,2447,2451,2456,2460,2464],{"type":20,"tag":106,"props":2427,"children":2428},{"style":136},[2429],{"type":26,"value":528},{"type":20,"tag":106,"props":2431,"children":2432},{"style":136},[2433],{"type":26,"value":533},{"type":20,"tag":106,"props":2435,"children":2436},{"style":156},[2437],{"type":26,"value":2438}," useNotesStore",{"type":20,"tag":106,"props":2440,"children":2441},{"style":162},[2442],{"type":26,"value":165},{"type":20,"tag":106,"props":2444,"children":2445},{"style":113},[2446],{"type":26,"value":424},{"type":20,"tag":106,"props":2448,"children":2449},{"style":119},[2450],{"type":26,"value":122},{"type":20,"tag":106,"props":2452,"children":2453},{"style":125},[2454],{"type":26,"value":2455},"'notes'",{"type":20,"tag":106,"props":2457,"children":2458},{"style":119},[2459],{"type":26,"value":133},{"type":20,"tag":106,"props":2461,"children":2462},{"style":136},[2463],{"type":26,"value":139},{"type":20,"tag":106,"props":2465,"children":2466},{"style":119},[2467],{"type":26,"value":144},{"type":20,"tag":106,"props":2469,"children":2470},{"class":108,"line":603},[2471,2475,2479,2483,2487,2491,2495,2499,2503,2507,2511],{"type":20,"tag":106,"props":2472,"children":2473},{"style":136},[2474],{"type":26,"value":153},{"type":20,"tag":106,"props":2476,"children":2477},{"style":119},[2478],{"type":26,"value":286},{"type":20,"tag":106,"props":2480,"children":2481},{"style":156},[2482],{"type":26,"value":2395},{"type":20,"tag":106,"props":2484,"children":2485},{"style":119},[2486],{"type":26,"value":296},{"type":20,"tag":106,"props":2488,"children":2489},{"style":156},[2490],{"type":26,"value":2404},{"type":20,"tag":106,"props":2492,"children":2493},{"style":119},[2494],{"type":26,"value":586},{"type":20,"tag":106,"props":2496,"children":2497},{"style":162},[2498],{"type":26,"value":591},{"type":20,"tag":106,"props":2500,"children":2501},{"style":113},[2502],{"type":26,"value":1338},{"type":20,"tag":106,"props":2504,"children":2505},{"style":119},[2506],{"type":26,"value":122},{"type":20,"tag":106,"props":2508,"children":2509},{"style":113},[2510],{"type":26,"value":752},{"type":20,"tag":106,"props":2512,"children":2513},{"style":119},[2514],{"type":26,"value":2515},"());\n",{"type":20,"tag":106,"props":2517,"children":2518},{"class":108,"line":611},[2519],{"type":20,"tag":106,"props":2520,"children":2521},{"emptyLinePlaceholder":517},[2522],{"type":26,"value":520},{"type":20,"tag":106,"props":2524,"children":2525},{"class":108,"line":663},[2526,2530,2535,2539,2543,2547,2551],{"type":20,"tag":106,"props":2527,"children":2528},{"style":136},[2529],{"type":26,"value":153},{"type":20,"tag":106,"props":2531,"children":2532},{"style":156},[2533],{"type":26,"value":2534}," notes",{"type":20,"tag":106,"props":2536,"children":2537},{"style":162},[2538],{"type":26,"value":165},{"type":20,"tag":106,"props":2540,"children":2541},{"style":113},[2542],{"type":26,"value":206},{"type":20,"tag":106,"props":2544,"children":2545},{"style":119},[2546],{"type":26,"value":211},{"type":20,"tag":106,"props":2548,"children":2549},{"style":136},[2550],{"type":26,"value":139},{"type":20,"tag":106,"props":2552,"children":2553},{"style":119},[2554],{"type":26,"value":144},{"type":20,"tag":106,"props":2556,"children":2557},{"class":108,"line":671},[2558,2562,2566,2570,2574,2578,2583,2587,2592,2597,2601,2605,2609,2614,2618],{"type":20,"tag":106,"props":2559,"children":2560},{"style":136},[2561],{"type":26,"value":952},{"type":20,"tag":106,"props":2563,"children":2564},{"style":156},[2565],{"type":26,"value":2351},{"type":20,"tag":106,"props":2567,"children":2568},{"style":119},[2569],{"type":26,"value":224},{"type":20,"tag":106,"props":2571,"children":2572},{"style":156},[2573],{"type":26,"value":230},{"type":20,"tag":106,"props":2575,"children":2576},{"style":119},[2577],{"type":26,"value":224},{"type":20,"tag":106,"props":2579,"children":2580},{"style":113},[2581],{"type":26,"value":2582},"map",{"type":20,"tag":106,"props":2584,"children":2585},{"style":119},[2586],{"type":26,"value":122},{"type":20,"tag":106,"props":2588,"children":2589},{"style":1631},[2590],{"type":26,"value":2591},"uuid",{"type":20,"tag":106,"props":2593,"children":2594},{"style":136},[2595],{"type":26,"value":2596}," =>",{"type":20,"tag":106,"props":2598,"children":2599},{"style":156},[2600],{"type":26,"value":2317},{"type":20,"tag":106,"props":2602,"children":2603},{"style":119},[2604],{"type":26,"value":224},{"type":20,"tag":106,"props":2606,"children":2607},{"style":227},[2608],{"type":26,"value":230},{"type":20,"tag":106,"props":2610,"children":2611},{"style":119},[2612],{"type":26,"value":2613},"[",{"type":20,"tag":106,"props":2615,"children":2616},{"style":227},[2617],{"type":26,"value":2591},{"type":20,"tag":106,"props":2619,"children":2620},{"style":119},[2621],{"type":26,"value":2622},"]);\n",{"type":20,"tag":106,"props":2624,"children":2625},{"class":108,"line":691},[2626],{"type":20,"tag":106,"props":2627,"children":2628},{"style":119},[2629],{"type":26,"value":2630},"    })\n",{"type":20,"tag":106,"props":2632,"children":2634},{"class":108,"line":2633},14,[2635],{"type":20,"tag":106,"props":2636,"children":2637},{"emptyLinePlaceholder":517},[2638],{"type":26,"value":520},{"type":20,"tag":106,"props":2640,"children":2642},{"class":108,"line":2641},15,[2643,2647,2652],{"type":20,"tag":106,"props":2644,"children":2645},{"style":136},[2646],{"type":26,"value":934},{"type":20,"tag":106,"props":2648,"children":2649},{"style":113},[2650],{"type":26,"value":2651}," addNote",{"type":20,"tag":106,"props":2653,"children":2654},{"style":119},[2655],{"type":26,"value":944},{"type":20,"tag":106,"props":2657,"children":2659},{"class":108,"line":2658},16,[2660,2665,2670,2674,2679,2683,2688],{"type":20,"tag":106,"props":2661,"children":2662},{"style":136},[2663],{"type":26,"value":2664},"        const",{"type":20,"tag":106,"props":2666,"children":2667},{"style":156},[2668],{"type":26,"value":2669}," uuid",{"type":20,"tag":106,"props":2671,"children":2672},{"style":162},[2673],{"type":26,"value":165},{"type":20,"tag":106,"props":2675,"children":2676},{"style":156},[2677],{"type":26,"value":2678}," crypto",{"type":20,"tag":106,"props":2680,"children":2681},{"style":119},[2682],{"type":26,"value":224},{"type":20,"tag":106,"props":2684,"children":2685},{"style":113},[2686],{"type":26,"value":2687},"randomUUID",{"type":20,"tag":106,"props":2689,"children":2690},{"style":119},[2691],{"type":26,"value":2692},"();\n",{"type":20,"tag":106,"props":2694,"children":2696},{"class":108,"line":2695},17,[2697,2702,2706,2710,2714,2718,2723,2727],{"type":20,"tag":106,"props":2698,"children":2699},{"style":156},[2700],{"type":26,"value":2701},"        notesMap",{"type":20,"tag":106,"props":2703,"children":2704},{"style":119},[2705],{"type":26,"value":224},{"type":20,"tag":106,"props":2707,"children":2708},{"style":227},[2709],{"type":26,"value":230},{"type":20,"tag":106,"props":2711,"children":2712},{"style":119},[2713],{"type":26,"value":2613},{"type":20,"tag":106,"props":2715,"children":2716},{"style":227},[2717],{"type":26,"value":2591},{"type":20,"tag":106,"props":2719,"children":2720},{"style":119},[2721],{"type":26,"value":2722},"] ",{"type":20,"tag":106,"props":2724,"children":2725},{"style":162},[2726],{"type":26,"value":591},{"type":20,"tag":106,"props":2728,"children":2729},{"style":119},[2730],{"type":26,"value":144},{"type":20,"tag":106,"props":2732,"children":2734},{"class":108,"line":2733},18,[2735,2740],{"type":20,"tag":106,"props":2736,"children":2737},{"style":227},[2738],{"type":26,"value":2739},"            uuid",{"type":20,"tag":106,"props":2741,"children":2742},{"style":119},[2743],{"type":26,"value":1694},{"type":20,"tag":106,"props":2745,"children":2747},{"class":108,"line":2746},19,[2748,2753,2757],{"type":20,"tag":106,"props":2749,"children":2750},{"style":227},[2751],{"type":26,"value":2752},"            text",{"type":20,"tag":106,"props":2754,"children":2755},{"style":119},[2756],{"type":26,"value":1639},{"type":20,"tag":106,"props":2758,"children":2759},{"style":125},[2760],{"type":26,"value":2761},"'New Note'\n",{"type":20,"tag":106,"props":2763,"children":2765},{"class":108,"line":2764},20,[2766],{"type":20,"tag":106,"props":2767,"children":2768},{"style":119},[2769],{"type":26,"value":2770},"        }\n",{"type":20,"tag":106,"props":2772,"children":2774},{"class":108,"line":2773},21,[2775,2780,2784,2788,2792,2797,2801,2805],{"type":20,"tag":106,"props":2776,"children":2777},{"style":156},[2778],{"type":26,"value":2779},"        notesOrder",{"type":20,"tag":106,"props":2781,"children":2782},{"style":119},[2783],{"type":26,"value":224},{"type":20,"tag":106,"props":2785,"children":2786},{"style":156},[2787],{"type":26,"value":230},{"type":20,"tag":106,"props":2789,"children":2790},{"style":119},[2791],{"type":26,"value":224},{"type":20,"tag":106,"props":2793,"children":2794},{"style":113},[2795],{"type":26,"value":2796},"push",{"type":20,"tag":106,"props":2798,"children":2799},{"style":119},[2800],{"type":26,"value":122},{"type":20,"tag":106,"props":2802,"children":2803},{"style":227},[2804],{"type":26,"value":2591},{"type":20,"tag":106,"props":2806,"children":2807},{"style":119},[2808],{"type":26,"value":2809},");\n",{"type":20,"tag":106,"props":2811,"children":2813},{"class":108,"line":2812},22,[2814],{"type":20,"tag":106,"props":2815,"children":2816},{"style":119},[2817],{"type":26,"value":981},{"type":20,"tag":106,"props":2819,"children":2821},{"class":108,"line":2820},23,[2822],{"type":20,"tag":106,"props":2823,"children":2824},{"emptyLinePlaceholder":517},[2825],{"type":26,"value":520},{"type":20,"tag":106,"props":2827,"children":2829},{"class":108,"line":2828},24,[2830,2834,2839,2843,2847,2851,2855,2859,2863,2867,2871],{"type":20,"tag":106,"props":2831,"children":2832},{"style":136},[2833],{"type":26,"value":934},{"type":20,"tag":106,"props":2835,"children":2836},{"style":113},[2837],{"type":26,"value":2838}," changeText",{"type":20,"tag":106,"props":2840,"children":2841},{"style":119},[2842],{"type":26,"value":122},{"type":20,"tag":106,"props":2844,"children":2845},{"style":1631},[2846],{"type":26,"value":2591},{"type":20,"tag":106,"props":2848,"children":2849},{"style":119},[2850],{"type":26,"value":1639},{"type":20,"tag":106,"props":2852,"children":2853},{"style":156},[2854],{"type":26,"value":2037},{"type":20,"tag":106,"props":2856,"children":2857},{"style":119},[2858],{"type":26,"value":296},{"type":20,"tag":106,"props":2860,"children":2861},{"style":1631},[2862],{"type":26,"value":26},{"type":20,"tag":106,"props":2864,"children":2865},{"style":119},[2866],{"type":26,"value":1639},{"type":20,"tag":106,"props":2868,"children":2869},{"style":156},[2870],{"type":26,"value":2037},{"type":20,"tag":106,"props":2872,"children":2873},{"style":119},[2874],{"type":26,"value":2875},") {\n",{"type":20,"tag":106,"props":2877,"children":2879},{"class":108,"line":2878},25,[2880,2885,2889,2893,2897,2901,2905,2909],{"type":20,"tag":106,"props":2881,"children":2882},{"style":136},[2883],{"type":26,"value":2884},"        if",{"type":20,"tag":106,"props":2886,"children":2887},{"style":119},[2888],{"type":26,"value":122},{"type":20,"tag":106,"props":2890,"children":2891},{"style":156},[2892],{"type":26,"value":2395},{"type":20,"tag":106,"props":2894,"children":2895},{"style":119},[2896],{"type":26,"value":224},{"type":20,"tag":106,"props":2898,"children":2899},{"style":227},[2900],{"type":26,"value":230},{"type":20,"tag":106,"props":2902,"children":2903},{"style":119},[2904],{"type":26,"value":2613},{"type":20,"tag":106,"props":2906,"children":2907},{"style":227},[2908],{"type":26,"value":2591},{"type":20,"tag":106,"props":2910,"children":2911},{"style":119},[2912],{"type":26,"value":2913},"]) {\n",{"type":20,"tag":106,"props":2915,"children":2917},{"class":108,"line":2916},26,[2918,2923,2927,2931,2935,2939,2944,2948,2952,2957,2962,2967],{"type":20,"tag":106,"props":2919,"children":2920},{"style":156},[2921],{"type":26,"value":2922},"            notesMap",{"type":20,"tag":106,"props":2924,"children":2925},{"style":119},[2926],{"type":26,"value":224},{"type":20,"tag":106,"props":2928,"children":2929},{"style":227},[2930],{"type":26,"value":230},{"type":20,"tag":106,"props":2932,"children":2933},{"style":119},[2934],{"type":26,"value":2613},{"type":20,"tag":106,"props":2936,"children":2937},{"style":227},[2938],{"type":26,"value":2591},{"type":20,"tag":106,"props":2940,"children":2941},{"style":119},[2942],{"type":26,"value":2943},"].",{"type":20,"tag":106,"props":2945,"children":2946},{"style":227},[2947],{"type":26,"value":26},{"type":20,"tag":106,"props":2949,"children":2950},{"style":162},[2951],{"type":26,"value":165},{"type":20,"tag":106,"props":2953,"children":2954},{"style":227},[2955],{"type":26,"value":2956}," text",{"type":20,"tag":106,"props":2958,"children":2959},{"style":162},[2960],{"type":26,"value":2961}," ||",{"type":20,"tag":106,"props":2963,"children":2964},{"style":125},[2965],{"type":26,"value":2966}," 'New Note'",{"type":20,"tag":106,"props":2968,"children":2969},{"style":119},[2970],{"type":26,"value":1412},{"type":20,"tag":106,"props":2972,"children":2974},{"class":108,"line":2973},27,[2975],{"type":20,"tag":106,"props":2976,"children":2977},{"style":119},[2978],{"type":26,"value":2770},{"type":20,"tag":106,"props":2980,"children":2982},{"class":108,"line":2981},28,[2983],{"type":20,"tag":106,"props":2984,"children":2985},{"style":119},[2986],{"type":26,"value":981},{"type":20,"tag":106,"props":2988,"children":2990},{"class":108,"line":2989},29,[2991],{"type":20,"tag":106,"props":2992,"children":2993},{"emptyLinePlaceholder":517},[2994],{"type":26,"value":520},{"type":20,"tag":106,"props":2996,"children":2998},{"class":108,"line":2997},30,[2999,3003,3008,3012,3016,3020,3024,3028,3033,3037,3042],{"type":20,"tag":106,"props":3000,"children":3001},{"style":136},[3002],{"type":26,"value":934},{"type":20,"tag":106,"props":3004,"children":3005},{"style":113},[3006],{"type":26,"value":3007}," moveNote",{"type":20,"tag":106,"props":3009,"children":3010},{"style":119},[3011],{"type":26,"value":122},{"type":20,"tag":106,"props":3013,"children":3014},{"style":1631},[3015],{"type":26,"value":2591},{"type":20,"tag":106,"props":3017,"children":3018},{"style":119},[3019],{"type":26,"value":1639},{"type":20,"tag":106,"props":3021,"children":3022},{"style":156},[3023],{"type":26,"value":2037},{"type":20,"tag":106,"props":3025,"children":3026},{"style":119},[3027],{"type":26,"value":296},{"type":20,"tag":106,"props":3029,"children":3030},{"style":1631},[3031],{"type":26,"value":3032},"newIndex",{"type":20,"tag":106,"props":3034,"children":3035},{"style":119},[3036],{"type":26,"value":1639},{"type":20,"tag":106,"props":3038,"children":3039},{"style":156},[3040],{"type":26,"value":3041},"number",{"type":20,"tag":106,"props":3043,"children":3044},{"style":119},[3045],{"type":26,"value":2875},{"type":20,"tag":106,"props":3047,"children":3049},{"class":108,"line":3048},31,[3050,3054,3059,3063,3067,3071,3075,3079,3084,3088,3092],{"type":20,"tag":106,"props":3051,"children":3052},{"style":136},[3053],{"type":26,"value":2664},{"type":20,"tag":106,"props":3055,"children":3056},{"style":156},[3057],{"type":26,"value":3058}," noteIndex",{"type":20,"tag":106,"props":3060,"children":3061},{"style":162},[3062],{"type":26,"value":165},{"type":20,"tag":106,"props":3064,"children":3065},{"style":156},[3066],{"type":26,"value":2351},{"type":20,"tag":106,"props":3068,"children":3069},{"style":119},[3070],{"type":26,"value":224},{"type":20,"tag":106,"props":3072,"children":3073},{"style":156},[3074],{"type":26,"value":230},{"type":20,"tag":106,"props":3076,"children":3077},{"style":119},[3078],{"type":26,"value":224},{"type":20,"tag":106,"props":3080,"children":3081},{"style":113},[3082],{"type":26,"value":3083},"indexOf",{"type":20,"tag":106,"props":3085,"children":3086},{"style":119},[3087],{"type":26,"value":122},{"type":20,"tag":106,"props":3089,"children":3090},{"style":227},[3091],{"type":26,"value":2591},{"type":20,"tag":106,"props":3093,"children":3094},{"style":119},[3095],{"type":26,"value":2809},{"type":20,"tag":106,"props":3097,"children":3099},{"class":108,"line":3098},32,[3100,3104,3108,3112,3116,3121,3125,3130,3134,3140],{"type":20,"tag":106,"props":3101,"children":3102},{"style":156},[3103],{"type":26,"value":2779},{"type":20,"tag":106,"props":3105,"children":3106},{"style":119},[3107],{"type":26,"value":224},{"type":20,"tag":106,"props":3109,"children":3110},{"style":156},[3111],{"type":26,"value":230},{"type":20,"tag":106,"props":3113,"children":3114},{"style":119},[3115],{"type":26,"value":224},{"type":20,"tag":106,"props":3117,"children":3118},{"style":113},[3119],{"type":26,"value":3120},"splice",{"type":20,"tag":106,"props":3122,"children":3123},{"style":119},[3124],{"type":26,"value":122},{"type":20,"tag":106,"props":3126,"children":3127},{"style":227},[3128],{"type":26,"value":3129},"noteIndex",{"type":20,"tag":106,"props":3131,"children":3132},{"style":119},[3133],{"type":26,"value":296},{"type":20,"tag":106,"props":3135,"children":3137},{"style":3136},"--shiki-default:#D19A66",[3138],{"type":26,"value":3139},"1",{"type":20,"tag":106,"props":3141,"children":3142},{"style":119},[3143],{"type":26,"value":2809},{"type":20,"tag":106,"props":3145,"children":3147},{"class":108,"line":3146},33,[3148,3152,3156,3160,3164,3168,3172,3176,3180,3185,3189,3193],{"type":20,"tag":106,"props":3149,"children":3150},{"style":156},[3151],{"type":26,"value":2779},{"type":20,"tag":106,"props":3153,"children":3154},{"style":119},[3155],{"type":26,"value":224},{"type":20,"tag":106,"props":3157,"children":3158},{"style":156},[3159],{"type":26,"value":230},{"type":20,"tag":106,"props":3161,"children":3162},{"style":119},[3163],{"type":26,"value":224},{"type":20,"tag":106,"props":3165,"children":3166},{"style":113},[3167],{"type":26,"value":3120},{"type":20,"tag":106,"props":3169,"children":3170},{"style":119},[3171],{"type":26,"value":122},{"type":20,"tag":106,"props":3173,"children":3174},{"style":227},[3175],{"type":26,"value":3032},{"type":20,"tag":106,"props":3177,"children":3178},{"style":119},[3179],{"type":26,"value":296},{"type":20,"tag":106,"props":3181,"children":3182},{"style":3136},[3183],{"type":26,"value":3184},"0",{"type":20,"tag":106,"props":3186,"children":3187},{"style":119},[3188],{"type":26,"value":296},{"type":20,"tag":106,"props":3190,"children":3191},{"style":227},[3192],{"type":26,"value":2591},{"type":20,"tag":106,"props":3194,"children":3195},{"style":119},[3196],{"type":26,"value":2809},{"type":20,"tag":106,"props":3198,"children":3200},{"class":108,"line":3199},34,[3201],{"type":20,"tag":106,"props":3202,"children":3203},{"style":119},[3204],{"type":26,"value":981},{"type":20,"tag":106,"props":3206,"children":3208},{"class":108,"line":3207},35,[3209],{"type":20,"tag":106,"props":3210,"children":3211},{"emptyLinePlaceholder":517},[3212],{"type":26,"value":520},{"type":20,"tag":106,"props":3214,"children":3216},{"class":108,"line":3215},36,[3217,3221,3225,3230,3234,3239,3243,3248],{"type":20,"tag":106,"props":3218,"children":3219},{"style":136},[3220],{"type":26,"value":281},{"type":20,"tag":106,"props":3222,"children":3223},{"style":119},[3224],{"type":26,"value":286},{"type":20,"tag":106,"props":3226,"children":3227},{"style":227},[3228],{"type":26,"value":3229},"notes",{"type":20,"tag":106,"props":3231,"children":3232},{"style":119},[3233],{"type":26,"value":296},{"type":20,"tag":106,"props":3235,"children":3236},{"style":227},[3237],{"type":26,"value":3238},"addNote",{"type":20,"tag":106,"props":3240,"children":3241},{"style":119},[3242],{"type":26,"value":296},{"type":20,"tag":106,"props":3244,"children":3245},{"style":227},[3246],{"type":26,"value":3247},"changeText",{"type":20,"tag":106,"props":3249,"children":3250},{"style":119},[3251],{"type":26,"value":3252}," };\n",{"type":20,"tag":106,"props":3254,"children":3256},{"class":108,"line":3255},37,[3257],{"type":20,"tag":106,"props":3258,"children":3259},{"style":119},[3260],{"type":26,"value":315},{"type":20,"tag":29,"props":3262,"children":3263},{},[3264],{"type":26,"value":3265},"As you can see, we've applied everything we've discussed so far.",{"type":20,"tag":703,"props":3267,"children":3268},{},[3269,3274,3279],{"type":20,"tag":707,"props":3270,"children":3271},{},[3272],{"type":26,"value":3273},"We created a private store that holds our state in different structure that is easier to manage",{"type":20,"tag":707,"props":3275,"children":3276},{},[3277],{"type":26,"value":3278},"We created a public store that exposes only what we want",{"type":20,"tag":707,"props":3280,"children":3281},{},[3282,3284,3296,3298,3309],{"type":26,"value":3283},"We used ",{"type":20,"tag":102,"props":3285,"children":3286},{"className":331,"language":332,"style":7},[3287,3292],{"type":20,"tag":106,"props":3288,"children":3289},{"style":113},[3290],{"type":26,"value":3291},"reactiveStore",{"type":20,"tag":106,"props":3293,"children":3294},{"style":119},[3295],{"type":26,"value":343},{"type":26,"value":3297}," to get nice ",{"type":20,"tag":102,"props":3299,"children":3300},{"className":331,"language":332,"style":7},[3301,3305],{"type":20,"tag":106,"props":3302,"children":3303},{"style":113},[3304],{"type":26,"value":338},{"type":20,"tag":106,"props":3306,"children":3307},{"style":119},[3308],{"type":26,"value":343},{"type":26,"value":3310}," versions of our state properties alongside actions.",{"type":20,"tag":29,"props":3312,"children":3313},{},[3314],{"type":26,"value":3315},"I hope you found something useful in this article. Or even got an entirely new idea to try out.",{"type":20,"tag":3317,"props":3318,"children":3320},"h4",{"id":3319},"i-should-go",[3321],{"type":26,"value":3322},"I should go,",{"type":20,"tag":29,"props":3324,"children":3325},{},[3326],{"type":26,"value":3327},"Krystian",{"type":20,"tag":3329,"props":3330,"children":3331},"style",{},[3332],{"type":26,"value":3333},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":7,"searchDepth":147,"depth":147,"links":3335},[3336,3337,3338,3342,3346],{"id":23,"depth":147,"text":27},{"id":55,"depth":147,"text":58},{"id":86,"depth":147,"text":89,"children":3339},[3340,3341],{"id":387,"depth":187,"text":390},{"id":802,"depth":187,"text":805},{"id":831,"depth":147,"text":834,"children":3343},[3344,3345],{"id":1367,"depth":187,"text":1370},{"id":1778,"depth":187,"text":1781},{"id":2121,"depth":147,"text":2124},"markdown","content:articles:how-i-manage-pinia-stores.md","content","articles/how-i-manage-pinia-stores.md","articles/how-i-manage-pinia-stores","md",1757703408030]