[{"data":1,"prerenderedAt":1299},["Reactive",2],{"blog/pinia-setup-stores":3},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"draft":6,"external":6,"category":10,"tags":13,"date":19,"body":20,"_type":1293,"_id":1294,"_source":1295,"_file":1296,"_stem":1297,"_extension":1298},"/blog/pinia-setup-stores","blog",false,"","Pinia - You might want to use setup stores","In Pinia you can define stores in two ways. Using the Options or Composition API. Depending how big your store can grow, you might want to go the Composition API way.",[11,12],"Vue","Pinia",[14,15,16,17,18],"vuejs","vue3","pinia","wweb","javascript","2023-02-15T00:00:00.000Z",{"type":21,"children":22,"toc":1287},"root",[23,50,55,60,67,83,359,365,379,611,616,625,630,635,640,647,653,658,966,979,985,997,1261,1266,1271,1276,1281],{"type":24,"tag":25,"props":26,"children":27},"element","p",{},[28,31,39,41,48],{"type":29,"value":30},"text","In ",{"type":24,"tag":32,"props":33,"children":37},"a",{"href":34,"rel":35},"https://pinia.vuejs.org/",[36],"nofollow",[38],{"type":29,"value":12},{"type":29,"value":40}," you can ",{"type":24,"tag":32,"props":42,"children":45},{"href":43,"rel":44},"https://pinia.vuejs.org/core-concepts/#defining-a-store",[36],[46],{"type":29,"value":47},"define stores",{"type":29,"value":49}," in two ways.",{"type":24,"tag":25,"props":51,"children":52},{},[53],{"type":29,"value":54},"These ways are similar to Vue's Options and Composition APIS. Depending how big your store can grow, you might want to go the Composition API way.",{"type":24,"tag":25,"props":56,"children":57},{},[58],{"type":29,"value":59},"Let's break it down.",{"type":24,"tag":61,"props":62,"children":64},"h2",{"id":63},"the-options-api-way",[65],{"type":29,"value":66},"The Options API Way",{"type":24,"tag":68,"props":69,"children":70},"blockquote",{},[71],{"type":24,"tag":25,"props":72,"children":73},{},[74,76],{"type":29,"value":75},"Documentation: ",{"type":24,"tag":32,"props":77,"children":80},{"href":78,"rel":79},"https://pinia.vuejs.org/core-concepts/#option-stores",[36],[81],{"type":29,"value":82},"\"Option Store\"",{"type":24,"tag":84,"props":85,"children":89},"pre",{"className":86,"code":87,"language":88,"meta":7,"style":7},"language-js shiki shiki-themes github-dark","export const useLoading = defineStore('loading', {\n  state: () => ({ queue: [] }),\n  actions: {\n    add(el) {\n      this.queue = [...this.queue, el]\n    },\n    stop(el) {\n        this.queue = this.queue.filter(f => f != el)\n    }\n  },\n})\n","js",[90],{"type":24,"tag":91,"props":92,"children":93},"code",{"__ignoreMap":7},[94,145,169,178,202,241,250,271,332,341,350],{"type":24,"tag":95,"props":96,"children":99},"span",{"class":97,"line":98},"line",1,[100,106,111,117,122,128,134,140],{"type":24,"tag":95,"props":101,"children":103},{"style":102},"--shiki-default:#F97583",[104],{"type":29,"value":105},"export",{"type":24,"tag":95,"props":107,"children":108},{"style":102},[109],{"type":29,"value":110}," const",{"type":24,"tag":95,"props":112,"children":114},{"style":113},"--shiki-default:#79B8FF",[115],{"type":29,"value":116}," useLoading",{"type":24,"tag":95,"props":118,"children":119},{"style":102},[120],{"type":29,"value":121}," =",{"type":24,"tag":95,"props":123,"children":125},{"style":124},"--shiki-default:#B392F0",[126],{"type":29,"value":127}," defineStore",{"type":24,"tag":95,"props":129,"children":131},{"style":130},"--shiki-default:#E1E4E8",[132],{"type":29,"value":133},"(",{"type":24,"tag":95,"props":135,"children":137},{"style":136},"--shiki-default:#9ECBFF",[138],{"type":29,"value":139},"'loading'",{"type":24,"tag":95,"props":141,"children":142},{"style":130},[143],{"type":29,"value":144},", {\n",{"type":24,"tag":95,"props":146,"children":148},{"class":97,"line":147},2,[149,154,159,164],{"type":24,"tag":95,"props":150,"children":151},{"style":124},[152],{"type":29,"value":153},"  state",{"type":24,"tag":95,"props":155,"children":156},{"style":130},[157],{"type":29,"value":158},": () ",{"type":24,"tag":95,"props":160,"children":161},{"style":102},[162],{"type":29,"value":163},"=>",{"type":24,"tag":95,"props":165,"children":166},{"style":130},[167],{"type":29,"value":168}," ({ queue: [] }),\n",{"type":24,"tag":95,"props":170,"children":172},{"class":97,"line":171},3,[173],{"type":24,"tag":95,"props":174,"children":175},{"style":130},[176],{"type":29,"value":177},"  actions: {\n",{"type":24,"tag":95,"props":179,"children":181},{"class":97,"line":180},4,[182,187,191,197],{"type":24,"tag":95,"props":183,"children":184},{"style":124},[185],{"type":29,"value":186},"    add",{"type":24,"tag":95,"props":188,"children":189},{"style":130},[190],{"type":29,"value":133},{"type":24,"tag":95,"props":192,"children":194},{"style":193},"--shiki-default:#FFAB70",[195],{"type":29,"value":196},"el",{"type":24,"tag":95,"props":198,"children":199},{"style":130},[200],{"type":29,"value":201},") {\n",{"type":24,"tag":95,"props":203,"children":205},{"class":97,"line":204},5,[206,211,216,221,226,231,236],{"type":24,"tag":95,"props":207,"children":208},{"style":113},[209],{"type":29,"value":210},"      this",{"type":24,"tag":95,"props":212,"children":213},{"style":130},[214],{"type":29,"value":215},".queue ",{"type":24,"tag":95,"props":217,"children":218},{"style":102},[219],{"type":29,"value":220},"=",{"type":24,"tag":95,"props":222,"children":223},{"style":130},[224],{"type":29,"value":225}," [",{"type":24,"tag":95,"props":227,"children":228},{"style":102},[229],{"type":29,"value":230},"...",{"type":24,"tag":95,"props":232,"children":233},{"style":113},[234],{"type":29,"value":235},"this",{"type":24,"tag":95,"props":237,"children":238},{"style":130},[239],{"type":29,"value":240},".queue, el]\n",{"type":24,"tag":95,"props":242,"children":244},{"class":97,"line":243},6,[245],{"type":24,"tag":95,"props":246,"children":247},{"style":130},[248],{"type":29,"value":249},"    },\n",{"type":24,"tag":95,"props":251,"children":253},{"class":97,"line":252},7,[254,259,263,267],{"type":24,"tag":95,"props":255,"children":256},{"style":124},[257],{"type":29,"value":258},"    stop",{"type":24,"tag":95,"props":260,"children":261},{"style":130},[262],{"type":29,"value":133},{"type":24,"tag":95,"props":264,"children":265},{"style":193},[266],{"type":29,"value":196},{"type":24,"tag":95,"props":268,"children":269},{"style":130},[270],{"type":29,"value":201},{"type":24,"tag":95,"props":272,"children":274},{"class":97,"line":273},8,[275,280,284,288,293,298,303,307,312,317,322,327],{"type":24,"tag":95,"props":276,"children":277},{"style":113},[278],{"type":29,"value":279},"        this",{"type":24,"tag":95,"props":281,"children":282},{"style":130},[283],{"type":29,"value":215},{"type":24,"tag":95,"props":285,"children":286},{"style":102},[287],{"type":29,"value":220},{"type":24,"tag":95,"props":289,"children":290},{"style":113},[291],{"type":29,"value":292}," this",{"type":24,"tag":95,"props":294,"children":295},{"style":130},[296],{"type":29,"value":297},".queue.",{"type":24,"tag":95,"props":299,"children":300},{"style":124},[301],{"type":29,"value":302},"filter",{"type":24,"tag":95,"props":304,"children":305},{"style":130},[306],{"type":29,"value":133},{"type":24,"tag":95,"props":308,"children":309},{"style":193},[310],{"type":29,"value":311},"f",{"type":24,"tag":95,"props":313,"children":314},{"style":102},[315],{"type":29,"value":316}," =>",{"type":24,"tag":95,"props":318,"children":319},{"style":130},[320],{"type":29,"value":321}," f ",{"type":24,"tag":95,"props":323,"children":324},{"style":102},[325],{"type":29,"value":326},"!=",{"type":24,"tag":95,"props":328,"children":329},{"style":130},[330],{"type":29,"value":331}," el)\n",{"type":24,"tag":95,"props":333,"children":335},{"class":97,"line":334},9,[336],{"type":24,"tag":95,"props":337,"children":338},{"style":130},[339],{"type":29,"value":340},"    }\n",{"type":24,"tag":95,"props":342,"children":344},{"class":97,"line":343},10,[345],{"type":24,"tag":95,"props":346,"children":347},{"style":130},[348],{"type":29,"value":349},"  },\n",{"type":24,"tag":95,"props":351,"children":353},{"class":97,"line":352},11,[354],{"type":24,"tag":95,"props":355,"children":356},{"style":130},[357],{"type":29,"value":358},"})\n",{"type":24,"tag":61,"props":360,"children":362},{"id":361},"the-composition-api-way",[363],{"type":29,"value":364},"The Composition API Way",{"type":24,"tag":68,"props":366,"children":367},{},[368],{"type":24,"tag":25,"props":369,"children":370},{},[371,372],{"type":29,"value":75},{"type":24,"tag":32,"props":373,"children":376},{"href":374,"rel":375},"https://pinia.vuejs.org/core-concepts/#setup-stores",[36],[377],{"type":29,"value":378},"\"Setup Store\"",{"type":24,"tag":84,"props":380,"children":382},{"className":86,"code":381,"language":88,"meta":7,"style":7},"export const useLoading = defineStore('loading', () => {\n  const queue = ref([])\n  function add(el) {\n    queue.value = [...queue.value, el]\n  }\n  function stop(el) {\n    queue.value = queue.value.filter(f => f != el)\n  }\n  return { queue, add }\n})\n",[383],{"type":24,"tag":91,"props":384,"children":385},{"__ignoreMap":7},[386,431,458,483,508,516,540,584,591,604],{"type":24,"tag":95,"props":387,"children":388},{"class":97,"line":98},[389,393,397,401,405,409,413,417,422,426],{"type":24,"tag":95,"props":390,"children":391},{"style":102},[392],{"type":29,"value":105},{"type":24,"tag":95,"props":394,"children":395},{"style":102},[396],{"type":29,"value":110},{"type":24,"tag":95,"props":398,"children":399},{"style":113},[400],{"type":29,"value":116},{"type":24,"tag":95,"props":402,"children":403},{"style":102},[404],{"type":29,"value":121},{"type":24,"tag":95,"props":406,"children":407},{"style":124},[408],{"type":29,"value":127},{"type":24,"tag":95,"props":410,"children":411},{"style":130},[412],{"type":29,"value":133},{"type":24,"tag":95,"props":414,"children":415},{"style":136},[416],{"type":29,"value":139},{"type":24,"tag":95,"props":418,"children":419},{"style":130},[420],{"type":29,"value":421},", () ",{"type":24,"tag":95,"props":423,"children":424},{"style":102},[425],{"type":29,"value":163},{"type":24,"tag":95,"props":427,"children":428},{"style":130},[429],{"type":29,"value":430}," {\n",{"type":24,"tag":95,"props":432,"children":433},{"class":97,"line":147},[434,439,444,448,453],{"type":24,"tag":95,"props":435,"children":436},{"style":102},[437],{"type":29,"value":438},"  const",{"type":24,"tag":95,"props":440,"children":441},{"style":113},[442],{"type":29,"value":443}," queue",{"type":24,"tag":95,"props":445,"children":446},{"style":102},[447],{"type":29,"value":121},{"type":24,"tag":95,"props":449,"children":450},{"style":124},[451],{"type":29,"value":452}," ref",{"type":24,"tag":95,"props":454,"children":455},{"style":130},[456],{"type":29,"value":457},"([])\n",{"type":24,"tag":95,"props":459,"children":460},{"class":97,"line":171},[461,466,471,475,479],{"type":24,"tag":95,"props":462,"children":463},{"style":102},[464],{"type":29,"value":465},"  function",{"type":24,"tag":95,"props":467,"children":468},{"style":124},[469],{"type":29,"value":470}," add",{"type":24,"tag":95,"props":472,"children":473},{"style":130},[474],{"type":29,"value":133},{"type":24,"tag":95,"props":476,"children":477},{"style":193},[478],{"type":29,"value":196},{"type":24,"tag":95,"props":480,"children":481},{"style":130},[482],{"type":29,"value":201},{"type":24,"tag":95,"props":484,"children":485},{"class":97,"line":180},[486,491,495,499,503],{"type":24,"tag":95,"props":487,"children":488},{"style":130},[489],{"type":29,"value":490},"    queue.value ",{"type":24,"tag":95,"props":492,"children":493},{"style":102},[494],{"type":29,"value":220},{"type":24,"tag":95,"props":496,"children":497},{"style":130},[498],{"type":29,"value":225},{"type":24,"tag":95,"props":500,"children":501},{"style":102},[502],{"type":29,"value":230},{"type":24,"tag":95,"props":504,"children":505},{"style":130},[506],{"type":29,"value":507},"queue.value, el]\n",{"type":24,"tag":95,"props":509,"children":510},{"class":97,"line":204},[511],{"type":24,"tag":95,"props":512,"children":513},{"style":130},[514],{"type":29,"value":515},"  }\n",{"type":24,"tag":95,"props":517,"children":518},{"class":97,"line":243},[519,523,528,532,536],{"type":24,"tag":95,"props":520,"children":521},{"style":102},[522],{"type":29,"value":465},{"type":24,"tag":95,"props":524,"children":525},{"style":124},[526],{"type":29,"value":527}," stop",{"type":24,"tag":95,"props":529,"children":530},{"style":130},[531],{"type":29,"value":133},{"type":24,"tag":95,"props":533,"children":534},{"style":193},[535],{"type":29,"value":196},{"type":24,"tag":95,"props":537,"children":538},{"style":130},[539],{"type":29,"value":201},{"type":24,"tag":95,"props":541,"children":542},{"class":97,"line":252},[543,547,551,556,560,564,568,572,576,580],{"type":24,"tag":95,"props":544,"children":545},{"style":130},[546],{"type":29,"value":490},{"type":24,"tag":95,"props":548,"children":549},{"style":102},[550],{"type":29,"value":220},{"type":24,"tag":95,"props":552,"children":553},{"style":130},[554],{"type":29,"value":555}," queue.value.",{"type":24,"tag":95,"props":557,"children":558},{"style":124},[559],{"type":29,"value":302},{"type":24,"tag":95,"props":561,"children":562},{"style":130},[563],{"type":29,"value":133},{"type":24,"tag":95,"props":565,"children":566},{"style":193},[567],{"type":29,"value":311},{"type":24,"tag":95,"props":569,"children":570},{"style":102},[571],{"type":29,"value":316},{"type":24,"tag":95,"props":573,"children":574},{"style":130},[575],{"type":29,"value":321},{"type":24,"tag":95,"props":577,"children":578},{"style":102},[579],{"type":29,"value":326},{"type":24,"tag":95,"props":581,"children":582},{"style":130},[583],{"type":29,"value":331},{"type":24,"tag":95,"props":585,"children":586},{"class":97,"line":273},[587],{"type":24,"tag":95,"props":588,"children":589},{"style":130},[590],{"type":29,"value":515},{"type":24,"tag":95,"props":592,"children":593},{"class":97,"line":334},[594,599],{"type":24,"tag":95,"props":595,"children":596},{"style":102},[597],{"type":29,"value":598},"  return",{"type":24,"tag":95,"props":600,"children":601},{"style":130},[602],{"type":29,"value":603}," { queue, add }\n",{"type":24,"tag":95,"props":605,"children":606},{"class":97,"line":343},[607],{"type":24,"tag":95,"props":608,"children":609},{"style":130},[610],{"type":29,"value":358},{"type":24,"tag":25,"props":612,"children":613},{},[614],{"type":29,"value":615},"The official documentation recommends starting  with the Option Store if you are undecided and that's perfectly fine. That's also what I did for a few of my apps and still finding it more comfortable if I may.",{"type":24,"tag":25,"props":617,"children":618},{},[619],{"type":24,"tag":620,"props":621,"children":622},"strong",{},[623],{"type":29,"value":624},"But in some cases I, for one, wish I would've gone with the Setup Store.",{"type":24,"tag":25,"props":626,"children":627},{},[628],{"type":29,"value":629},"Let's see why.",{"type":24,"tag":25,"props":631,"children":632},{},[633],{"type":29,"value":634},"I have a rather big store, multiple actions for which I need to track in a sepparate store when the api request is done and when it finishes.",{"type":24,"tag":25,"props":636,"children":637},{},[638],{"type":29,"value":639},"This implies using a store in another store.",{"type":24,"tag":641,"props":642,"children":644},"h1",{"id":643},"how-you-do-this",[645],{"type":29,"value":646},"How you do this?",{"type":24,"tag":61,"props":648,"children":650},{"id":649},"option-store",[651],{"type":29,"value":652},"Option Store",{"type":24,"tag":25,"props":654,"children":655},{},[656],{"type":29,"value":657},"For the option stores it can look something like this",{"type":24,"tag":84,"props":659,"children":661},{"className":86,"code":660,"language":88,"meta":7,"style":7},"export const useDemo = defineStore('demo', {\n  state: () => ({}),\n  actions: {\n    actionOne(el) {\n        const $loading = useLoading()\n        $loading.add(\"actionOne\")\n        /// await api call \n        $loading.stop(\"actionOne\")\n    },\n    actionTwo(el) {\n        const $loading = useLoading()\n        $loading.add(\"actionTwo\")\n        /// await api call \n        $loading.stop(\"actionTwo\")\n    },\n  },\n})\n",[662],{"type":24,"tag":91,"props":663,"children":664},{"__ignoreMap":7},[665,702,722,729,749,775,802,811,835,842,862,885,910,918,942,950,958],{"type":24,"tag":95,"props":666,"children":667},{"class":97,"line":98},[668,672,676,681,685,689,693,698],{"type":24,"tag":95,"props":669,"children":670},{"style":102},[671],{"type":29,"value":105},{"type":24,"tag":95,"props":673,"children":674},{"style":102},[675],{"type":29,"value":110},{"type":24,"tag":95,"props":677,"children":678},{"style":113},[679],{"type":29,"value":680}," useDemo",{"type":24,"tag":95,"props":682,"children":683},{"style":102},[684],{"type":29,"value":121},{"type":24,"tag":95,"props":686,"children":687},{"style":124},[688],{"type":29,"value":127},{"type":24,"tag":95,"props":690,"children":691},{"style":130},[692],{"type":29,"value":133},{"type":24,"tag":95,"props":694,"children":695},{"style":136},[696],{"type":29,"value":697},"'demo'",{"type":24,"tag":95,"props":699,"children":700},{"style":130},[701],{"type":29,"value":144},{"type":24,"tag":95,"props":703,"children":704},{"class":97,"line":147},[705,709,713,717],{"type":24,"tag":95,"props":706,"children":707},{"style":124},[708],{"type":29,"value":153},{"type":24,"tag":95,"props":710,"children":711},{"style":130},[712],{"type":29,"value":158},{"type":24,"tag":95,"props":714,"children":715},{"style":102},[716],{"type":29,"value":163},{"type":24,"tag":95,"props":718,"children":719},{"style":130},[720],{"type":29,"value":721}," ({}),\n",{"type":24,"tag":95,"props":723,"children":724},{"class":97,"line":171},[725],{"type":24,"tag":95,"props":726,"children":727},{"style":130},[728],{"type":29,"value":177},{"type":24,"tag":95,"props":730,"children":731},{"class":97,"line":180},[732,737,741,745],{"type":24,"tag":95,"props":733,"children":734},{"style":124},[735],{"type":29,"value":736},"    actionOne",{"type":24,"tag":95,"props":738,"children":739},{"style":130},[740],{"type":29,"value":133},{"type":24,"tag":95,"props":742,"children":743},{"style":193},[744],{"type":29,"value":196},{"type":24,"tag":95,"props":746,"children":747},{"style":130},[748],{"type":29,"value":201},{"type":24,"tag":95,"props":750,"children":751},{"class":97,"line":204},[752,757,762,766,770],{"type":24,"tag":95,"props":753,"children":754},{"style":102},[755],{"type":29,"value":756},"        const",{"type":24,"tag":95,"props":758,"children":759},{"style":113},[760],{"type":29,"value":761}," $loading",{"type":24,"tag":95,"props":763,"children":764},{"style":102},[765],{"type":29,"value":121},{"type":24,"tag":95,"props":767,"children":768},{"style":124},[769],{"type":29,"value":116},{"type":24,"tag":95,"props":771,"children":772},{"style":130},[773],{"type":29,"value":774},"()\n",{"type":24,"tag":95,"props":776,"children":777},{"class":97,"line":243},[778,783,788,792,797],{"type":24,"tag":95,"props":779,"children":780},{"style":130},[781],{"type":29,"value":782},"        $loading.",{"type":24,"tag":95,"props":784,"children":785},{"style":124},[786],{"type":29,"value":787},"add",{"type":24,"tag":95,"props":789,"children":790},{"style":130},[791],{"type":29,"value":133},{"type":24,"tag":95,"props":793,"children":794},{"style":136},[795],{"type":29,"value":796},"\"actionOne\"",{"type":24,"tag":95,"props":798,"children":799},{"style":130},[800],{"type":29,"value":801},")\n",{"type":24,"tag":95,"props":803,"children":804},{"class":97,"line":252},[805],{"type":24,"tag":95,"props":806,"children":808},{"style":807},"--shiki-default:#6A737D",[809],{"type":29,"value":810},"        /// await api call \n",{"type":24,"tag":95,"props":812,"children":813},{"class":97,"line":273},[814,818,823,827,831],{"type":24,"tag":95,"props":815,"children":816},{"style":130},[817],{"type":29,"value":782},{"type":24,"tag":95,"props":819,"children":820},{"style":124},[821],{"type":29,"value":822},"stop",{"type":24,"tag":95,"props":824,"children":825},{"style":130},[826],{"type":29,"value":133},{"type":24,"tag":95,"props":828,"children":829},{"style":136},[830],{"type":29,"value":796},{"type":24,"tag":95,"props":832,"children":833},{"style":130},[834],{"type":29,"value":801},{"type":24,"tag":95,"props":836,"children":837},{"class":97,"line":334},[838],{"type":24,"tag":95,"props":839,"children":840},{"style":130},[841],{"type":29,"value":249},{"type":24,"tag":95,"props":843,"children":844},{"class":97,"line":343},[845,850,854,858],{"type":24,"tag":95,"props":846,"children":847},{"style":124},[848],{"type":29,"value":849},"    actionTwo",{"type":24,"tag":95,"props":851,"children":852},{"style":130},[853],{"type":29,"value":133},{"type":24,"tag":95,"props":855,"children":856},{"style":193},[857],{"type":29,"value":196},{"type":24,"tag":95,"props":859,"children":860},{"style":130},[861],{"type":29,"value":201},{"type":24,"tag":95,"props":863,"children":864},{"class":97,"line":352},[865,869,873,877,881],{"type":24,"tag":95,"props":866,"children":867},{"style":102},[868],{"type":29,"value":756},{"type":24,"tag":95,"props":870,"children":871},{"style":113},[872],{"type":29,"value":761},{"type":24,"tag":95,"props":874,"children":875},{"style":102},[876],{"type":29,"value":121},{"type":24,"tag":95,"props":878,"children":879},{"style":124},[880],{"type":29,"value":116},{"type":24,"tag":95,"props":882,"children":883},{"style":130},[884],{"type":29,"value":774},{"type":24,"tag":95,"props":886,"children":888},{"class":97,"line":887},12,[889,893,897,901,906],{"type":24,"tag":95,"props":890,"children":891},{"style":130},[892],{"type":29,"value":782},{"type":24,"tag":95,"props":894,"children":895},{"style":124},[896],{"type":29,"value":787},{"type":24,"tag":95,"props":898,"children":899},{"style":130},[900],{"type":29,"value":133},{"type":24,"tag":95,"props":902,"children":903},{"style":136},[904],{"type":29,"value":905},"\"actionTwo\"",{"type":24,"tag":95,"props":907,"children":908},{"style":130},[909],{"type":29,"value":801},{"type":24,"tag":95,"props":911,"children":913},{"class":97,"line":912},13,[914],{"type":24,"tag":95,"props":915,"children":916},{"style":807},[917],{"type":29,"value":810},{"type":24,"tag":95,"props":919,"children":921},{"class":97,"line":920},14,[922,926,930,934,938],{"type":24,"tag":95,"props":923,"children":924},{"style":130},[925],{"type":29,"value":782},{"type":24,"tag":95,"props":927,"children":928},{"style":124},[929],{"type":29,"value":822},{"type":24,"tag":95,"props":931,"children":932},{"style":130},[933],{"type":29,"value":133},{"type":24,"tag":95,"props":935,"children":936},{"style":136},[937],{"type":29,"value":905},{"type":24,"tag":95,"props":939,"children":940},{"style":130},[941],{"type":29,"value":801},{"type":24,"tag":95,"props":943,"children":945},{"class":97,"line":944},15,[946],{"type":24,"tag":95,"props":947,"children":948},{"style":130},[949],{"type":29,"value":249},{"type":24,"tag":95,"props":951,"children":953},{"class":97,"line":952},16,[954],{"type":24,"tag":95,"props":955,"children":956},{"style":130},[957],{"type":29,"value":349},{"type":24,"tag":95,"props":959,"children":961},{"class":97,"line":960},17,[962],{"type":24,"tag":95,"props":963,"children":964},{"style":130},[965],{"type":29,"value":358},{"type":24,"tag":25,"props":967,"children":968},{},[969,971,977],{"type":29,"value":970},"Will work just fine but it bothers me a lot that i have to repeat the ",{"type":24,"tag":91,"props":972,"children":974},{"className":973},[],[975],{"type":29,"value":976},"const $loading = useLoading()",{"type":29,"value":978}," each time",{"type":24,"tag":61,"props":980,"children":982},{"id":981},"setup-store-to-the-rescue",[983],{"type":29,"value":984},"Setup Store to the rescue",{"type":24,"tag":25,"props":986,"children":987},{},[988,990,995],{"type":29,"value":989},"Now this is the case where everything looks nicer.\nYou just do the ",{"type":24,"tag":91,"props":991,"children":993},{"className":992},[],[994],{"type":29,"value":976},{"type":29,"value":996}," only at the top and that's it",{"type":24,"tag":84,"props":998,"children":1000},{"className":86,"code":999,"language":88,"meta":7,"style":7},"export const useDemo = defineStore('demo', () => {\n    const $loading = useLoading()\n    function actionOne(el) {\n        $loading.start(\"actionOne\")\n        /// await api call \n        $loading.stop(\"actionOne\")\n    }\n    function actionTwo(el) {\n        $loading.start(\"actionTwo\")\n        /// await api call \n        $loading.stop(\"actionTwo\")\n    }\n    return { actionOne, actionTwo }\n})\n",[1001],{"type":24,"tag":91,"props":1002,"children":1003},{"__ignoreMap":7},[1004,1047,1071,1096,1120,1127,1150,1157,1181,1204,1211,1234,1241,1254],{"type":24,"tag":95,"props":1005,"children":1006},{"class":97,"line":98},[1007,1011,1015,1019,1023,1027,1031,1035,1039,1043],{"type":24,"tag":95,"props":1008,"children":1009},{"style":102},[1010],{"type":29,"value":105},{"type":24,"tag":95,"props":1012,"children":1013},{"style":102},[1014],{"type":29,"value":110},{"type":24,"tag":95,"props":1016,"children":1017},{"style":113},[1018],{"type":29,"value":680},{"type":24,"tag":95,"props":1020,"children":1021},{"style":102},[1022],{"type":29,"value":121},{"type":24,"tag":95,"props":1024,"children":1025},{"style":124},[1026],{"type":29,"value":127},{"type":24,"tag":95,"props":1028,"children":1029},{"style":130},[1030],{"type":29,"value":133},{"type":24,"tag":95,"props":1032,"children":1033},{"style":136},[1034],{"type":29,"value":697},{"type":24,"tag":95,"props":1036,"children":1037},{"style":130},[1038],{"type":29,"value":421},{"type":24,"tag":95,"props":1040,"children":1041},{"style":102},[1042],{"type":29,"value":163},{"type":24,"tag":95,"props":1044,"children":1045},{"style":130},[1046],{"type":29,"value":430},{"type":24,"tag":95,"props":1048,"children":1049},{"class":97,"line":147},[1050,1055,1059,1063,1067],{"type":24,"tag":95,"props":1051,"children":1052},{"style":102},[1053],{"type":29,"value":1054},"    const",{"type":24,"tag":95,"props":1056,"children":1057},{"style":113},[1058],{"type":29,"value":761},{"type":24,"tag":95,"props":1060,"children":1061},{"style":102},[1062],{"type":29,"value":121},{"type":24,"tag":95,"props":1064,"children":1065},{"style":124},[1066],{"type":29,"value":116},{"type":24,"tag":95,"props":1068,"children":1069},{"style":130},[1070],{"type":29,"value":774},{"type":24,"tag":95,"props":1072,"children":1073},{"class":97,"line":171},[1074,1079,1084,1088,1092],{"type":24,"tag":95,"props":1075,"children":1076},{"style":102},[1077],{"type":29,"value":1078},"    function",{"type":24,"tag":95,"props":1080,"children":1081},{"style":124},[1082],{"type":29,"value":1083}," actionOne",{"type":24,"tag":95,"props":1085,"children":1086},{"style":130},[1087],{"type":29,"value":133},{"type":24,"tag":95,"props":1089,"children":1090},{"style":193},[1091],{"type":29,"value":196},{"type":24,"tag":95,"props":1093,"children":1094},{"style":130},[1095],{"type":29,"value":201},{"type":24,"tag":95,"props":1097,"children":1098},{"class":97,"line":180},[1099,1103,1108,1112,1116],{"type":24,"tag":95,"props":1100,"children":1101},{"style":130},[1102],{"type":29,"value":782},{"type":24,"tag":95,"props":1104,"children":1105},{"style":124},[1106],{"type":29,"value":1107},"start",{"type":24,"tag":95,"props":1109,"children":1110},{"style":130},[1111],{"type":29,"value":133},{"type":24,"tag":95,"props":1113,"children":1114},{"style":136},[1115],{"type":29,"value":796},{"type":24,"tag":95,"props":1117,"children":1118},{"style":130},[1119],{"type":29,"value":801},{"type":24,"tag":95,"props":1121,"children":1122},{"class":97,"line":204},[1123],{"type":24,"tag":95,"props":1124,"children":1125},{"style":807},[1126],{"type":29,"value":810},{"type":24,"tag":95,"props":1128,"children":1129},{"class":97,"line":243},[1130,1134,1138,1142,1146],{"type":24,"tag":95,"props":1131,"children":1132},{"style":130},[1133],{"type":29,"value":782},{"type":24,"tag":95,"props":1135,"children":1136},{"style":124},[1137],{"type":29,"value":822},{"type":24,"tag":95,"props":1139,"children":1140},{"style":130},[1141],{"type":29,"value":133},{"type":24,"tag":95,"props":1143,"children":1144},{"style":136},[1145],{"type":29,"value":796},{"type":24,"tag":95,"props":1147,"children":1148},{"style":130},[1149],{"type":29,"value":801},{"type":24,"tag":95,"props":1151,"children":1152},{"class":97,"line":252},[1153],{"type":24,"tag":95,"props":1154,"children":1155},{"style":130},[1156],{"type":29,"value":340},{"type":24,"tag":95,"props":1158,"children":1159},{"class":97,"line":273},[1160,1164,1169,1173,1177],{"type":24,"tag":95,"props":1161,"children":1162},{"style":102},[1163],{"type":29,"value":1078},{"type":24,"tag":95,"props":1165,"children":1166},{"style":124},[1167],{"type":29,"value":1168}," actionTwo",{"type":24,"tag":95,"props":1170,"children":1171},{"style":130},[1172],{"type":29,"value":133},{"type":24,"tag":95,"props":1174,"children":1175},{"style":193},[1176],{"type":29,"value":196},{"type":24,"tag":95,"props":1178,"children":1179},{"style":130},[1180],{"type":29,"value":201},{"type":24,"tag":95,"props":1182,"children":1183},{"class":97,"line":334},[1184,1188,1192,1196,1200],{"type":24,"tag":95,"props":1185,"children":1186},{"style":130},[1187],{"type":29,"value":782},{"type":24,"tag":95,"props":1189,"children":1190},{"style":124},[1191],{"type":29,"value":1107},{"type":24,"tag":95,"props":1193,"children":1194},{"style":130},[1195],{"type":29,"value":133},{"type":24,"tag":95,"props":1197,"children":1198},{"style":136},[1199],{"type":29,"value":905},{"type":24,"tag":95,"props":1201,"children":1202},{"style":130},[1203],{"type":29,"value":801},{"type":24,"tag":95,"props":1205,"children":1206},{"class":97,"line":343},[1207],{"type":24,"tag":95,"props":1208,"children":1209},{"style":807},[1210],{"type":29,"value":810},{"type":24,"tag":95,"props":1212,"children":1213},{"class":97,"line":352},[1214,1218,1222,1226,1230],{"type":24,"tag":95,"props":1215,"children":1216},{"style":130},[1217],{"type":29,"value":782},{"type":24,"tag":95,"props":1219,"children":1220},{"style":124},[1221],{"type":29,"value":822},{"type":24,"tag":95,"props":1223,"children":1224},{"style":130},[1225],{"type":29,"value":133},{"type":24,"tag":95,"props":1227,"children":1228},{"style":136},[1229],{"type":29,"value":905},{"type":24,"tag":95,"props":1231,"children":1232},{"style":130},[1233],{"type":29,"value":801},{"type":24,"tag":95,"props":1235,"children":1236},{"class":97,"line":887},[1237],{"type":24,"tag":95,"props":1238,"children":1239},{"style":130},[1240],{"type":29,"value":340},{"type":24,"tag":95,"props":1242,"children":1243},{"class":97,"line":912},[1244,1249],{"type":24,"tag":95,"props":1245,"children":1246},{"style":102},[1247],{"type":29,"value":1248},"    return",{"type":24,"tag":95,"props":1250,"children":1251},{"style":130},[1252],{"type":29,"value":1253}," { actionOne, actionTwo }\n",{"type":24,"tag":95,"props":1255,"children":1256},{"class":97,"line":920},[1257],{"type":24,"tag":95,"props":1258,"children":1259},{"style":130},[1260],{"type":29,"value":358},{"type":24,"tag":25,"props":1262,"children":1263},{},[1264],{"type":29,"value":1265},"And looks already much cleaner.",{"type":24,"tag":25,"props":1267,"children":1268},{},[1269],{"type":29,"value":1270},"So yeah, if you're into cleaner looking code you might want to got the \"Setup\" way when writing Pinia Stores.",{"type":24,"tag":25,"props":1272,"children":1273},{},[1274],{"type":29,"value":1275},"BRB, refactoring. 🚀",{"type":24,"tag":25,"props":1277,"children":1278},{},[1279],{"type":29,"value":1280},"Thank you.",{"type":24,"tag":1282,"props":1283,"children":1284},"style",{},[1285],{"type":29,"value":1286},"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":1288},[1289,1290,1291,1292],{"id":63,"depth":147,"text":66},{"id":361,"depth":147,"text":364},{"id":649,"depth":147,"text":652},{"id":981,"depth":147,"text":984},"markdown","content:blog:6.pinia-setup-stores.md","content","blog/6.pinia-setup-stores.md","blog/6.pinia-setup-stores","md",1724422646757]