[{"data":1,"prerenderedAt":847},["Reactive",2],{"blog/vue3-vuex-4-loading-wait":3},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"draft":6,"external":6,"category":10,"tags":12,"date":17,"body":18,"_type":841,"_id":842,"_source":843,"_file":844,"_stem":845,"_extension":846},"/blog/vue3-vuex-4-loading-wait","blog",false,"","Vuex4 Module to track your loading flags","Simple store module to keep your loading flags for async actions",[11],"Vue",[13,14,15,16],"vue","vuex","vite","module","2021-08-05T00:00:00.000Z",{"type":19,"children":20,"toc":839},"root",[21,46,51,73,85,90,95,394,399,550,555,630,635,752,757,823,828,833],{"type":22,"tag":23,"props":24,"children":25},"element","blockquote",{},[26,34],{"type":22,"tag":27,"props":28,"children":30},"h5",{"id":29},"repository",[31],{"type":32,"value":33},"text","Repository",{"type":22,"tag":35,"props":36,"children":37},"p",{},[38],{"type":22,"tag":39,"props":40,"children":44},"a",{"href":41,"rel":42},"https://github.com/andreitere/vue3-wait-example",[43],"nofollow",[45],{"type":32,"value":41},{"type":22,"tag":35,"props":47,"children":48},{},[49],{"type":32,"value":50},"Whenever you build a frontend application which calls backend apis and you also need to display the loading state you end up with multiple flags\nin your code to manage this.",{"type":22,"tag":35,"props":52,"children":53},{},[54,56,62,64,71],{"type":32,"value":55},"For Vue there is already an ",{"type":22,"tag":57,"props":58,"children":59},"strong",{},[60],{"type":32,"value":61},"awesome",{"type":32,"value":63}," module ( ",{"type":22,"tag":39,"props":65,"children":68},{"href":66,"rel":67},"https://github.com/f/vue-wait",[43],[69],{"type":32,"value":70},"vue-wait",{"type":32,"value":72}," ) which makes this easier but I wanted something quite simple with no additional dependency.",{"type":22,"tag":35,"props":74,"children":75},{},[76,78,83],{"type":32,"value":77},"If it's not clear this is highly insipired by ",{"type":22,"tag":79,"props":80,"children":81},"em",{},[82],{"type":32,"value":70},{"type":32,"value":84},".",{"type":22,"tag":35,"props":86,"children":87},{},[88],{"type":32,"value":89},"To keep it straight forward:",{"type":22,"tag":35,"props":91,"children":92},{},[93],{"type":32,"value":94},"wait module:",{"type":22,"tag":96,"props":97,"children":101},"pre",{"className":98,"code":99,"language":100,"meta":7,"style":7},"language-js shiki shiki-themes github-dark","export const wait = {\n    namespaced: true,\n    state() {\n        return {\n            queue: []\n        }\n    },\n    mutations: {\n        start(state, task) {\n            state.queue.push(task)\n        },\n        end(state, task) {\n            state.queue = state.queue.filter(item => item !== task);\n        }\n    }\n}\n","js",[102],{"type":22,"tag":103,"props":104,"children":105},"code",{"__ignoreMap":7},[106,140,159,174,187,196,205,214,223,258,277,286,315,368,376,385],{"type":22,"tag":107,"props":108,"children":111},"span",{"class":109,"line":110},"line",1,[112,118,123,129,134],{"type":22,"tag":107,"props":113,"children":115},{"style":114},"--shiki-default:#F97583",[116],{"type":32,"value":117},"export",{"type":22,"tag":107,"props":119,"children":120},{"style":114},[121],{"type":32,"value":122}," const",{"type":22,"tag":107,"props":124,"children":126},{"style":125},"--shiki-default:#79B8FF",[127],{"type":32,"value":128}," wait",{"type":22,"tag":107,"props":130,"children":131},{"style":114},[132],{"type":32,"value":133}," =",{"type":22,"tag":107,"props":135,"children":137},{"style":136},"--shiki-default:#E1E4E8",[138],{"type":32,"value":139}," {\n",{"type":22,"tag":107,"props":141,"children":143},{"class":109,"line":142},2,[144,149,154],{"type":22,"tag":107,"props":145,"children":146},{"style":136},[147],{"type":32,"value":148},"    namespaced: ",{"type":22,"tag":107,"props":150,"children":151},{"style":125},[152],{"type":32,"value":153},"true",{"type":22,"tag":107,"props":155,"children":156},{"style":136},[157],{"type":32,"value":158},",\n",{"type":22,"tag":107,"props":160,"children":162},{"class":109,"line":161},3,[163,169],{"type":22,"tag":107,"props":164,"children":166},{"style":165},"--shiki-default:#B392F0",[167],{"type":32,"value":168},"    state",{"type":22,"tag":107,"props":170,"children":171},{"style":136},[172],{"type":32,"value":173},"() {\n",{"type":22,"tag":107,"props":175,"children":177},{"class":109,"line":176},4,[178,183],{"type":22,"tag":107,"props":179,"children":180},{"style":114},[181],{"type":32,"value":182},"        return",{"type":22,"tag":107,"props":184,"children":185},{"style":136},[186],{"type":32,"value":139},{"type":22,"tag":107,"props":188,"children":190},{"class":109,"line":189},5,[191],{"type":22,"tag":107,"props":192,"children":193},{"style":136},[194],{"type":32,"value":195},"            queue: []\n",{"type":22,"tag":107,"props":197,"children":199},{"class":109,"line":198},6,[200],{"type":22,"tag":107,"props":201,"children":202},{"style":136},[203],{"type":32,"value":204},"        }\n",{"type":22,"tag":107,"props":206,"children":208},{"class":109,"line":207},7,[209],{"type":22,"tag":107,"props":210,"children":211},{"style":136},[212],{"type":32,"value":213},"    },\n",{"type":22,"tag":107,"props":215,"children":217},{"class":109,"line":216},8,[218],{"type":22,"tag":107,"props":219,"children":220},{"style":136},[221],{"type":32,"value":222},"    mutations: {\n",{"type":22,"tag":107,"props":224,"children":226},{"class":109,"line":225},9,[227,232,237,243,248,253],{"type":22,"tag":107,"props":228,"children":229},{"style":165},[230],{"type":32,"value":231},"        start",{"type":22,"tag":107,"props":233,"children":234},{"style":136},[235],{"type":32,"value":236},"(",{"type":22,"tag":107,"props":238,"children":240},{"style":239},"--shiki-default:#FFAB70",[241],{"type":32,"value":242},"state",{"type":22,"tag":107,"props":244,"children":245},{"style":136},[246],{"type":32,"value":247},", ",{"type":22,"tag":107,"props":249,"children":250},{"style":239},[251],{"type":32,"value":252},"task",{"type":22,"tag":107,"props":254,"children":255},{"style":136},[256],{"type":32,"value":257},") {\n",{"type":22,"tag":107,"props":259,"children":261},{"class":109,"line":260},10,[262,267,272],{"type":22,"tag":107,"props":263,"children":264},{"style":136},[265],{"type":32,"value":266},"            state.queue.",{"type":22,"tag":107,"props":268,"children":269},{"style":165},[270],{"type":32,"value":271},"push",{"type":22,"tag":107,"props":273,"children":274},{"style":136},[275],{"type":32,"value":276},"(task)\n",{"type":22,"tag":107,"props":278,"children":280},{"class":109,"line":279},11,[281],{"type":22,"tag":107,"props":282,"children":283},{"style":136},[284],{"type":32,"value":285},"        },\n",{"type":22,"tag":107,"props":287,"children":289},{"class":109,"line":288},12,[290,295,299,303,307,311],{"type":22,"tag":107,"props":291,"children":292},{"style":165},[293],{"type":32,"value":294},"        end",{"type":22,"tag":107,"props":296,"children":297},{"style":136},[298],{"type":32,"value":236},{"type":22,"tag":107,"props":300,"children":301},{"style":239},[302],{"type":32,"value":242},{"type":22,"tag":107,"props":304,"children":305},{"style":136},[306],{"type":32,"value":247},{"type":22,"tag":107,"props":308,"children":309},{"style":239},[310],{"type":32,"value":252},{"type":22,"tag":107,"props":312,"children":313},{"style":136},[314],{"type":32,"value":257},{"type":22,"tag":107,"props":316,"children":318},{"class":109,"line":317},13,[319,324,329,334,339,343,348,353,358,363],{"type":22,"tag":107,"props":320,"children":321},{"style":136},[322],{"type":32,"value":323},"            state.queue ",{"type":22,"tag":107,"props":325,"children":326},{"style":114},[327],{"type":32,"value":328},"=",{"type":22,"tag":107,"props":330,"children":331},{"style":136},[332],{"type":32,"value":333}," state.queue.",{"type":22,"tag":107,"props":335,"children":336},{"style":165},[337],{"type":32,"value":338},"filter",{"type":22,"tag":107,"props":340,"children":341},{"style":136},[342],{"type":32,"value":236},{"type":22,"tag":107,"props":344,"children":345},{"style":239},[346],{"type":32,"value":347},"item",{"type":22,"tag":107,"props":349,"children":350},{"style":114},[351],{"type":32,"value":352}," =>",{"type":22,"tag":107,"props":354,"children":355},{"style":136},[356],{"type":32,"value":357}," item ",{"type":22,"tag":107,"props":359,"children":360},{"style":114},[361],{"type":32,"value":362},"!==",{"type":22,"tag":107,"props":364,"children":365},{"style":136},[366],{"type":32,"value":367}," task);\n",{"type":22,"tag":107,"props":369,"children":371},{"class":109,"line":370},14,[372],{"type":22,"tag":107,"props":373,"children":374},{"style":136},[375],{"type":32,"value":204},{"type":22,"tag":107,"props":377,"children":379},{"class":109,"line":378},15,[380],{"type":22,"tag":107,"props":381,"children":382},{"style":136},[383],{"type":32,"value":384},"    }\n",{"type":22,"tag":107,"props":386,"children":388},{"class":109,"line":387},16,[389],{"type":22,"tag":107,"props":390,"children":391},{"style":136},[392],{"type":32,"value":393},"}\n",{"type":22,"tag":35,"props":395,"children":396},{},[397],{"type":32,"value":398},"how it mutation can be called from other modules:",{"type":22,"tag":96,"props":400,"children":402},{"className":98,"code":401,"language":100,"meta":7,"style":7}," async loadData({commit}) {\n    commit(\"wait/start\", \"load_data\", { root: true });\n    setTimeout(() => {\n        commit(\"wait/end\", \"load_data\", { root: true });\n    }, 2000);\n},\n",[403],{"type":22,"tag":103,"props":404,"children":405},{"__ignoreMap":7},[406,424,465,487,524,542],{"type":22,"tag":107,"props":407,"children":408},{"class":109,"line":110},[409,414,419],{"type":22,"tag":107,"props":410,"children":411},{"style":136},[412],{"type":32,"value":413}," async ",{"type":22,"tag":107,"props":415,"children":416},{"style":165},[417],{"type":32,"value":418},"loadData",{"type":22,"tag":107,"props":420,"children":421},{"style":136},[422],{"type":32,"value":423},"({commit}) {\n",{"type":22,"tag":107,"props":425,"children":426},{"class":109,"line":142},[427,432,436,442,446,451,456,460],{"type":22,"tag":107,"props":428,"children":429},{"style":165},[430],{"type":32,"value":431},"    commit",{"type":22,"tag":107,"props":433,"children":434},{"style":136},[435],{"type":32,"value":236},{"type":22,"tag":107,"props":437,"children":439},{"style":438},"--shiki-default:#9ECBFF",[440],{"type":32,"value":441},"\"wait/start\"",{"type":22,"tag":107,"props":443,"children":444},{"style":136},[445],{"type":32,"value":247},{"type":22,"tag":107,"props":447,"children":448},{"style":438},[449],{"type":32,"value":450},"\"load_data\"",{"type":22,"tag":107,"props":452,"children":453},{"style":136},[454],{"type":32,"value":455},", { root: ",{"type":22,"tag":107,"props":457,"children":458},{"style":125},[459],{"type":32,"value":153},{"type":22,"tag":107,"props":461,"children":462},{"style":136},[463],{"type":32,"value":464}," });\n",{"type":22,"tag":107,"props":466,"children":467},{"class":109,"line":161},[468,473,478,483],{"type":22,"tag":107,"props":469,"children":470},{"style":165},[471],{"type":32,"value":472},"    setTimeout",{"type":22,"tag":107,"props":474,"children":475},{"style":136},[476],{"type":32,"value":477},"(() ",{"type":22,"tag":107,"props":479,"children":480},{"style":114},[481],{"type":32,"value":482},"=>",{"type":22,"tag":107,"props":484,"children":485},{"style":136},[486],{"type":32,"value":139},{"type":22,"tag":107,"props":488,"children":489},{"class":109,"line":176},[490,495,499,504,508,512,516,520],{"type":22,"tag":107,"props":491,"children":492},{"style":165},[493],{"type":32,"value":494},"        commit",{"type":22,"tag":107,"props":496,"children":497},{"style":136},[498],{"type":32,"value":236},{"type":22,"tag":107,"props":500,"children":501},{"style":438},[502],{"type":32,"value":503},"\"wait/end\"",{"type":22,"tag":107,"props":505,"children":506},{"style":136},[507],{"type":32,"value":247},{"type":22,"tag":107,"props":509,"children":510},{"style":438},[511],{"type":32,"value":450},{"type":22,"tag":107,"props":513,"children":514},{"style":136},[515],{"type":32,"value":455},{"type":22,"tag":107,"props":517,"children":518},{"style":125},[519],{"type":32,"value":153},{"type":22,"tag":107,"props":521,"children":522},{"style":136},[523],{"type":32,"value":464},{"type":22,"tag":107,"props":525,"children":526},{"class":109,"line":189},[527,532,537],{"type":22,"tag":107,"props":528,"children":529},{"style":136},[530],{"type":32,"value":531},"    }, ",{"type":22,"tag":107,"props":533,"children":534},{"style":125},[535],{"type":32,"value":536},"2000",{"type":22,"tag":107,"props":538,"children":539},{"style":136},[540],{"type":32,"value":541},");\n",{"type":22,"tag":107,"props":543,"children":544},{"class":109,"line":198},[545],{"type":22,"tag":107,"props":546,"children":547},{"style":136},[548],{"type":32,"value":549},"},\n",{"type":22,"tag":35,"props":551,"children":552},{},[553],{"type":32,"value":554},"To get the data in your components:",{"type":22,"tag":96,"props":556,"children":558},{"className":98,"code":557,"language":100,"meta":7,"style":7},"...\nconst isLoading = computed(() => store.state.wait.queue.includes(\"load_data\"));\n...\n",[559],{"type":22,"tag":103,"props":560,"children":561},{"__ignoreMap":7},[562,570,623],{"type":22,"tag":107,"props":563,"children":564},{"class":109,"line":110},[565],{"type":22,"tag":107,"props":566,"children":567},{"style":114},[568],{"type":32,"value":569},"...\n",{"type":22,"tag":107,"props":571,"children":572},{"class":109,"line":142},[573,578,583,587,592,596,600,605,610,614,618],{"type":22,"tag":107,"props":574,"children":575},{"style":114},[576],{"type":32,"value":577},"const",{"type":22,"tag":107,"props":579,"children":580},{"style":125},[581],{"type":32,"value":582}," isLoading",{"type":22,"tag":107,"props":584,"children":585},{"style":114},[586],{"type":32,"value":133},{"type":22,"tag":107,"props":588,"children":589},{"style":165},[590],{"type":32,"value":591}," computed",{"type":22,"tag":107,"props":593,"children":594},{"style":136},[595],{"type":32,"value":477},{"type":22,"tag":107,"props":597,"children":598},{"style":114},[599],{"type":32,"value":482},{"type":22,"tag":107,"props":601,"children":602},{"style":136},[603],{"type":32,"value":604}," store.state.wait.queue.",{"type":22,"tag":107,"props":606,"children":607},{"style":165},[608],{"type":32,"value":609},"includes",{"type":22,"tag":107,"props":611,"children":612},{"style":136},[613],{"type":32,"value":236},{"type":22,"tag":107,"props":615,"children":616},{"style":438},[617],{"type":32,"value":450},{"type":22,"tag":107,"props":619,"children":620},{"style":136},[621],{"type":32,"value":622},"));\n",{"type":22,"tag":107,"props":624,"children":625},{"class":109,"line":161},[626],{"type":22,"tag":107,"props":627,"children":628},{"style":114},[629],{"type":32,"value":569},{"type":22,"tag":35,"props":631,"children":632},{},[633],{"type":32,"value":634},"... or we can have our custom utility function:",{"type":22,"tag":96,"props":636,"children":638},{"className":98,"code":637,"language":100,"meta":7,"style":7},"export const useWait = (task) => {\n    const store = useStore();\n    return computed(() => store.state.wait.queue.includes(task));\n};\n",[639],{"type":22,"tag":103,"props":640,"children":641},{"__ignoreMap":7},[642,684,711,744],{"type":22,"tag":107,"props":643,"children":644},{"class":109,"line":110},[645,649,653,658,662,667,671,676,680],{"type":22,"tag":107,"props":646,"children":647},{"style":114},[648],{"type":32,"value":117},{"type":22,"tag":107,"props":650,"children":651},{"style":114},[652],{"type":32,"value":122},{"type":22,"tag":107,"props":654,"children":655},{"style":165},[656],{"type":32,"value":657}," useWait",{"type":22,"tag":107,"props":659,"children":660},{"style":114},[661],{"type":32,"value":133},{"type":22,"tag":107,"props":663,"children":664},{"style":136},[665],{"type":32,"value":666}," (",{"type":22,"tag":107,"props":668,"children":669},{"style":239},[670],{"type":32,"value":252},{"type":22,"tag":107,"props":672,"children":673},{"style":136},[674],{"type":32,"value":675},") ",{"type":22,"tag":107,"props":677,"children":678},{"style":114},[679],{"type":32,"value":482},{"type":22,"tag":107,"props":681,"children":682},{"style":136},[683],{"type":32,"value":139},{"type":22,"tag":107,"props":685,"children":686},{"class":109,"line":142},[687,692,697,701,706],{"type":22,"tag":107,"props":688,"children":689},{"style":114},[690],{"type":32,"value":691},"    const",{"type":22,"tag":107,"props":693,"children":694},{"style":125},[695],{"type":32,"value":696}," store",{"type":22,"tag":107,"props":698,"children":699},{"style":114},[700],{"type":32,"value":133},{"type":22,"tag":107,"props":702,"children":703},{"style":165},[704],{"type":32,"value":705}," useStore",{"type":22,"tag":107,"props":707,"children":708},{"style":136},[709],{"type":32,"value":710},"();\n",{"type":22,"tag":107,"props":712,"children":713},{"class":109,"line":161},[714,719,723,727,731,735,739],{"type":22,"tag":107,"props":715,"children":716},{"style":114},[717],{"type":32,"value":718},"    return",{"type":22,"tag":107,"props":720,"children":721},{"style":165},[722],{"type":32,"value":591},{"type":22,"tag":107,"props":724,"children":725},{"style":136},[726],{"type":32,"value":477},{"type":22,"tag":107,"props":728,"children":729},{"style":114},[730],{"type":32,"value":482},{"type":22,"tag":107,"props":732,"children":733},{"style":136},[734],{"type":32,"value":604},{"type":22,"tag":107,"props":736,"children":737},{"style":165},[738],{"type":32,"value":609},{"type":22,"tag":107,"props":740,"children":741},{"style":136},[742],{"type":32,"value":743},"(task));\n",{"type":22,"tag":107,"props":745,"children":746},{"class":109,"line":176},[747],{"type":22,"tag":107,"props":748,"children":749},{"style":136},[750],{"type":32,"value":751},"};\n",{"type":22,"tag":35,"props":753,"children":754},{},[755],{"type":32,"value":756},"and use it like this:",{"type":22,"tag":96,"props":758,"children":760},{"className":98,"code":759,"language":100,"meta":7,"style":7},"import {useWait} from './store/wait';\nconst isLoading = useWait(\"load_data\");\n",[761],{"type":22,"tag":103,"props":762,"children":763},{"__ignoreMap":7},[764,792],{"type":22,"tag":107,"props":765,"children":766},{"class":109,"line":110},[767,772,777,782,787],{"type":22,"tag":107,"props":768,"children":769},{"style":114},[770],{"type":32,"value":771},"import",{"type":22,"tag":107,"props":773,"children":774},{"style":136},[775],{"type":32,"value":776}," {useWait} ",{"type":22,"tag":107,"props":778,"children":779},{"style":114},[780],{"type":32,"value":781},"from",{"type":22,"tag":107,"props":783,"children":784},{"style":438},[785],{"type":32,"value":786}," './store/wait'",{"type":22,"tag":107,"props":788,"children":789},{"style":136},[790],{"type":32,"value":791},";\n",{"type":22,"tag":107,"props":793,"children":794},{"class":109,"line":142},[795,799,803,807,811,815,819],{"type":22,"tag":107,"props":796,"children":797},{"style":114},[798],{"type":32,"value":577},{"type":22,"tag":107,"props":800,"children":801},{"style":125},[802],{"type":32,"value":582},{"type":22,"tag":107,"props":804,"children":805},{"style":114},[806],{"type":32,"value":133},{"type":22,"tag":107,"props":808,"children":809},{"style":165},[810],{"type":32,"value":657},{"type":22,"tag":107,"props":812,"children":813},{"style":136},[814],{"type":32,"value":236},{"type":22,"tag":107,"props":816,"children":817},{"style":438},[818],{"type":32,"value":450},{"type":22,"tag":107,"props":820,"children":821},{"style":136},[822],{"type":32,"value":541},{"type":22,"tag":35,"props":824,"children":825},{},[826],{"type":32,"value":827},"That's it.",{"type":22,"tag":35,"props":829,"children":830},{},[831],{"type":32,"value":832},"Thank you for reading 😄",{"type":22,"tag":834,"props":835,"children":836},"style",{},[837],{"type":32,"value":838},"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":142,"depth":142,"links":840},[],"markdown","content:blog:7.vue3-vuex-4-loading-wait.md","content","blog/7.vue3-vuex-4-loading-wait.md","blog/7.vue3-vuex-4-loading-wait","md",1724422646762]