[{"data":1,"prerenderedAt":169},["ShallowReactive",2],{"\u002Fvuejs-notes":3},{"id":4,"title":5,"body":6,"createdAt":157,"description":12,"draft":158,"extension":159,"image":160,"mastodonThread":160,"meta":161,"navigation":162,"path":163,"seo":164,"stem":165,"tags":166,"updatedAt":167,"__hash__":168},"content\u002FVueJS Notes.md","VueJS_Notes",{"type":7,"value":8,"toc":153},"minimark",[9,13],[10,11,12],"p",{},"A brain-dump of some things I ran into while learning VueJS and related technology (Vuex).",[14,15,16,68],"ul",{},[17,18,19,20],"li",{},"Vuex\n",[14,21,22,25,28,36,39,42,45,56,59,62,65],{},[17,23,24],{},"Makes me think of Software Transactional Memory",[17,26,27],{},"Mutations are synchronous",[17,29,30,31],{},"Since JS is single-threaded, that means they are atomic\n",[14,32,33],{},[17,34,35],{},"Even if they modify the state LOTS",[17,37,38],{},"Actions are a transaction that get committed",[17,40,41],{},"Actions are built out of multiple mutations",[17,43,44],{},"Actions can be async",[17,46,47,48],{},"At the end of an Action the state must be committed\n",[14,49,50,53],{},[17,51,52],{},"Where is the intermediate state stored?",[17,54,55],{},"How are conflicts resolved?",[17,57,58],{},"...",[17,60,61],{},"Based on experimentation, there is NO implicit transaction for an Action",[17,63,64],{},"In an action, each Mutation is executed immediately",[17,66,67],{},"I guess you could build something to make an Action have local-state transaction",[17,69,70,71],{},"Sugar\n",[14,72,73,76,79,97,118,121],{},[17,74,75],{},"One of the ways I like to learn and think about things is \"what part of this is sugar?\"",[17,77,78],{},"Attributes in components can use (mis-use?) xml namespaces to indicate the usage of the attribute",[17,80,81,85],{},[82,83,84],"code",{},"v-bind:value=\"foo\"",[14,86,87],{},[17,88,89,90,93,94],{},"SUGAR: Drop the ",[82,91,92],{},"v-bind"," and you end up with ",[82,95,96],{},":value=\"foo\"",[17,98,99,102],{},[82,100,101],{},"v-on:click=\"doStuff\"",[14,103,104],{},[17,105,106,107,110,111,114,115],{},"SUGAR: Replace ",[82,108,109],{},"v-on:"," with ",[82,112,113],{},"@"," and end up with ",[82,116,117],{},"@click=\"doStuff\"",[17,119,120],{},"Not Vue specific, but there are many oft-used JS sugar things",[17,122,123,124],{},"My favorite is implicit-object (aka hash) key\n",[14,125,126,137,140,145,148],{},[17,127,128,129,132,133,136],{},"Take ",[82,130,131],{},"{ \"Person\": Person }",", where ",[82,134,135],{},"Person"," is a scoped variable",[17,138,139],{},"First, it is well-known that you can drop the quotes",[17,141,142],{},[82,143,144],{},"{ Person: Person }",[17,146,147],{},"With new JS you can also collapse this down further, since the key and the value-name match",[17,149,150],{},[82,151,152],{},"{ Person }",{"title":154,"searchDepth":155,"depth":155,"links":156},"",2,[],"2020-02-16T17:06-05:00",false,"md",null,{},true,"\u002Fvuejs-notes",{"title":5,"description":12},"VueJS Notes",[],"2020-02-16T17:12-05:00","ZvUhTVAMt4K2iaJJpHgJWUw5Ue-buz1QJQjmqOp_c_o",1778988315415]