[{"data":1,"prerenderedAt":665},["ShallowReactive",2],{"page-\u002Fvue\u002Fvuex和普通全局对象":3},{"id":4,"title":5,"body":6,"description":16,"extension":659,"meta":660,"navigation":72,"path":661,"seo":662,"stem":663,"__hash__":664},"content\u002FVue\u002FVuex和普通全局对象.md","Vuex和普通全局对象",{"type":7,"value":8,"toc":652},"minimark",[9,13,17,21,33,36,50,113,164,243,247,274,305,311,332,354,446,462,628,631,639,642,648],[10,11,5],"h1",{"id":12},"vuex和普通全局对象",[14,15,16],"p",{},"在构建应用时，组件化与模块化开发以及多人开发各自组件的时候，不难保证各个组件都是唯一性的，多个组件共享状态肯定是存在的，而对多个共享状态进行维护是非常麻烦的，共享状态是谁都可以进行操作和修改的，这样就会导致所有对共享状态的操作都是不可预料的，所以就需要一个统一的管理进行维护。",[18,19,20],"h2",{"id":20},"描述",[14,22,23,24,27,28,32],{},"在大量的业务场景下，不同的模块组件之间确实需要共享数据，也需要对其进行修改操作。也就引发软件设计中的矛盾：模块组件之间需要共享数据和数据可能被任意修改导致不可预料的结果。为了解决其矛盾，软件设计上就提出了一种设计和架构思想，将全局状态进行统一的管理，并且需要获取、修改等操作必须按我设计的套路来，就好比马路上必须遵守的交通规则，右行斑马线就是只能右转一个道理，统一了对全局状态管理的唯一入口，使代码结构清晰、更利于维护。",[25,26],"br",{},"\n状态管理模式从软件设计的角度，就是以一种统一的约定和准则，对全局共享状态数据进行管理和操作的设计理念。你必须按照这种设计理念和架构来对你项目里共享状态数据进行",[29,30,31],"code",{},"CRUD","，所以所谓的状态管理模式就是软件设计的一种架构模式。",[18,34,35],{"id":35},"全局对象",[14,37,38,39,42,43,46,47,49],{},"当",[29,40,41],{},"Vue","应用中原始",[29,44,45],{},"data","对象的实际来源——当访问数据对象时，一个",[29,48,41],{},"实例只是简单的代理访问，但是如果你有一处需要被多个实例间共享的状态，可以简单地通过维护一份数据也就是全局变量来实现共享。",[51,52,57],"pre",{"className":53,"code":54,"language":55,"meta":56,"style":56},"language-javascript shiki shiki-themes github-light github-dark","var global = {};\n\nvar vmA = new Vue({\n    data: global\n})\n\nvar vmB = new Vue({\n    data: global\n})\n","javascript","",[29,58,59,67,74,80,86,92,97,103,108],{"__ignoreMap":56},[60,61,64],"span",{"class":62,"line":63},"line",1,[60,65,66],{},"var global = {};\n",[60,68,70],{"class":62,"line":69},2,[60,71,73],{"emptyLinePlaceholder":72},true,"\n",[60,75,77],{"class":62,"line":76},3,[60,78,79],{},"var vmA = new Vue({\n",[60,81,83],{"class":62,"line":82},4,[60,84,85],{},"    data: global\n",[60,87,89],{"class":62,"line":88},5,[60,90,91],{},"})\n",[60,93,95],{"class":62,"line":94},6,[60,96,73],{"emptyLinePlaceholder":72},[60,98,100],{"class":62,"line":99},7,[60,101,102],{},"var vmB = new Vue({\n",[60,104,106],{"class":62,"line":105},8,[60,107,85],{},[60,109,111],{"class":62,"line":110},9,[60,112,91],{},[14,114,115,116,119,120,123,124,127,128,131,132,134,135,137,138,141,142,144,145,148,149,151,152,155,156,159,160,163],{},"现在当",[29,117,118],{},"global","发生变更，",[29,121,122],{},"vmA","和",[29,125,126],{},"vmB","都将自动地更新它们的视图，子组件们的每个实例也会通过",[29,129,130],{},"this.$root.$data","去访问",[29,133,118],{},"。现在我们有了唯一的数据来源，但是调试将会变为非常麻烦。在任何时间以及我们应用中的任何部分，在任何数据改变后，都不会留下变更过的记录，这就导致了应用非常难以维护。",[25,136],{},"\n为了解决这个问题，可以自行实现一个简单的",[29,139,140],{},"store","模式，所有",[29,143,140],{},"中",[29,146,147],{},"state","的变更，都应该放置在",[29,150,140],{},"自身的",[29,153,154],{},"action","中去管理。这种集中式状态管理能够被更容易地理解哪种类型的变更将会发生，以及它们是如何被触发，当错误出现时，我们现在也会有一个",[29,157,158],{},"log","记录",[29,161,162],{},"bug","之前发生了什么。",[51,165,167],{"className":53,"code":166,"language":55,"meta":56,"style":56},"var store = {\n    debug: true,\n    state: {\n        message: \"Hello!\"\n    },\n    setMessageAction: function(val) {\n        if(this.debug) console.log(\"setMessageAction triggered with\", newValue);\n        this.state.message = val;\n    },\n    clearMessageAction: function() {\n        if(this.debug) console.log(\"clearMessageAction triggered\");\n        this.state.message = \"\";\n    }\n}\n",[29,168,169,174,179,184,189,194,199,204,209,213,219,225,231,237],{"__ignoreMap":56},[60,170,171],{"class":62,"line":63},[60,172,173],{},"var store = {\n",[60,175,176],{"class":62,"line":69},[60,177,178],{},"    debug: true,\n",[60,180,181],{"class":62,"line":76},[60,182,183],{},"    state: {\n",[60,185,186],{"class":62,"line":82},[60,187,188],{},"        message: \"Hello!\"\n",[60,190,191],{"class":62,"line":88},[60,192,193],{},"    },\n",[60,195,196],{"class":62,"line":94},[60,197,198],{},"    setMessageAction: function(val) {\n",[60,200,201],{"class":62,"line":99},[60,202,203],{},"        if(this.debug) console.log(\"setMessageAction triggered with\", newValue);\n",[60,205,206],{"class":62,"line":105},[60,207,208],{},"        this.state.message = val;\n",[60,210,211],{"class":62,"line":110},[60,212,193],{},[60,214,216],{"class":62,"line":215},10,[60,217,218],{},"    clearMessageAction: function() {\n",[60,220,222],{"class":62,"line":221},11,[60,223,224],{},"        if(this.debug) console.log(\"clearMessageAction triggered\");\n",[60,226,228],{"class":62,"line":227},12,[60,229,230],{},"        this.state.message = \"\";\n",[60,232,234],{"class":62,"line":233},13,[60,235,236],{},"    }\n",[60,238,240],{"class":62,"line":239},14,[60,241,242],{},"}\n",[18,244,246],{"id":245},"vuex","Vuex",[14,248,249,251,252,255,256,258,259,261,262,264,265,267,268,270,271,273],{},[29,250,246],{},"是一个专为",[29,253,254],{},"Vue.js","应用程序开发的状态管理模式，其采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。",[25,257],{},"\n每一个",[29,260,246],{},"应用的核心就是",[29,263,140],{},"仓库，",[29,266,140],{},"基本上就是一个容器，它包含着你的应用中大部分的状态",[29,269,147],{},"。",[29,272,246],{},"和单纯的全局对象有以下两点不同：",[275,276,277,292],"ul",{},[278,279,280,282,283,285,286,288,289,291],"li",{},[29,281,246],{},"的状态存储是响应式的，当",[29,284,41],{},"组件从",[29,287,140],{},"中读取状态的时候，若",[29,290,140],{},"中的状态发生变化，那么相应的组件也会相应地得到高效更新。",[278,293,294,295,297,298,300,301,304],{},"不能直接改变",[29,296,140],{},"中的状态，改变",[29,299,140],{},"中的状态的唯一途径就是显式地提交",[29,302,303],{},"mutation","，这样使得我们可以方便地跟踪每一个状态的变化。",[14,306,307,308,310],{},"实际上我们可以得到更多使用",[29,309,246],{},"的优点：",[275,312,313,316,321,327],{},[278,314,315],{},"可以使用时间旅行功能。",[278,317,318,320],{},[29,319,246],{},"专做态管理，由一个统一的方法去修改数据，全部的修改都是可以追溯的。",[278,322,323,324,326],{},"在做日志搜集，埋点的时候，有",[29,325,246],{},"更方便。",[278,328,329,331],{},[29,330,246],{},"不会造成全局变量的污染，同时解决了父组件与孙组件，以及兄弟组件之间通信的问题。",[14,333,334,335,337,338,340,341,343,344,346,347,349,350,353],{},"当然如果项目足够小，使用",[29,336,246],{},"可能是繁琐冗余的。如果应用够简单，最好不要使用",[29,339,246],{},"，上文中的一个简单的",[29,342,140],{},"模式就足够了。",[25,345],{},"\n在下面例子中，我们通过提交",[29,348,303],{},"的方式，而非直接改变",[29,351,352],{},"store.state.count","，是因为我们想要更明确地追踪到状态的变化。这个简单的约定能够让你的意图更加明显，这样你在阅读代码的时候能更容易地解读应用内部的状态改变。此外这样也让我们有机会去实现一些能记录每次状态改变，保存状态快照的调试工具。",[51,355,357],{"className":53,"code":356,"language":55,"meta":56,"style":56},"import Vue from \"vue\";\nimport Vuex from \"vuex\";\n\nVue.use(Vuex);\n\nconst store = new Vuex.Store({\n    state: {\n        count: 0\n    },\n    mutations: {\n        increment: function(state) {\n            state.count++;\n        }\n    }\n})\n\nstore.commit(\"increment\");\nconsole.log(store.state.count); \u002F\u002F 1\n",[29,358,359,364,369,373,378,382,387,391,396,400,405,410,415,420,424,429,434,440],{"__ignoreMap":56},[60,360,361],{"class":62,"line":63},[60,362,363],{},"import Vue from \"vue\";\n",[60,365,366],{"class":62,"line":69},[60,367,368],{},"import Vuex from \"vuex\";\n",[60,370,371],{"class":62,"line":76},[60,372,73],{"emptyLinePlaceholder":72},[60,374,375],{"class":62,"line":82},[60,376,377],{},"Vue.use(Vuex);\n",[60,379,380],{"class":62,"line":88},[60,381,73],{"emptyLinePlaceholder":72},[60,383,384],{"class":62,"line":94},[60,385,386],{},"const store = new Vuex.Store({\n",[60,388,389],{"class":62,"line":99},[60,390,183],{},[60,392,393],{"class":62,"line":105},[60,394,395],{},"        count: 0\n",[60,397,398],{"class":62,"line":110},[60,399,193],{},[60,401,402],{"class":62,"line":215},[60,403,404],{},"    mutations: {\n",[60,406,407],{"class":62,"line":221},[60,408,409],{},"        increment: function(state) {\n",[60,411,412],{"class":62,"line":227},[60,413,414],{},"            state.count++;\n",[60,416,417],{"class":62,"line":233},[60,418,419],{},"        }\n",[60,421,422],{"class":62,"line":239},[60,423,236],{},[60,425,427],{"class":62,"line":426},15,[60,428,91],{},[60,430,432],{"class":62,"line":431},16,[60,433,73],{"emptyLinePlaceholder":72},[60,435,437],{"class":62,"line":436},17,[60,438,439],{},"store.commit(\"increment\");\n",[60,441,443],{"class":62,"line":442},18,[60,444,445],{},"console.log(store.state.count); \u002F\u002F 1\n",[14,447,448,449,451,452,454,455,458,459,461],{},"由于",[29,450,140],{},"中的状态是响应式的，在组件中调用",[29,453,140],{},"中的状态简单到仅需要在计算属性中返回即可。触发变化也仅仅是在组件的",[29,456,457],{},"methods","中提交",[29,460,303],{},"即可。",[51,463,465],{"className":53,"code":464,"language":55,"meta":56,"style":56},"import Vue from \"vue\";\nimport Vuex from \"vuex\";\n\nVue.use(Vuex);\n\n\nconst store = new Vuex.Store({\n    state: {\n        count: 0\n    },\n    mutations: {\n        increment: state => state.count++,\n        decrement: state => state.count--\n    }\n})\n\nnew Vue({\n    el: \"#app\",\n    store,  \n    computed: {\n        count: function() {\n            return this.$store.state.count;\n        }\n    },\n     methods: {\n        increment: function() {\n            this.$store.commit(\"increment\");\n        },\n        decrement: function() {\n            this.$store.commit(\"decrement\");\n        }\n    }\n})\n",[29,466,467,471,475,479,483,487,491,495,499,503,507,511,516,521,525,529,533,538,543,549,555,561,567,572,577,583,589,595,601,607,613,618,623],{"__ignoreMap":56},[60,468,469],{"class":62,"line":63},[60,470,363],{},[60,472,473],{"class":62,"line":69},[60,474,368],{},[60,476,477],{"class":62,"line":76},[60,478,73],{"emptyLinePlaceholder":72},[60,480,481],{"class":62,"line":82},[60,482,377],{},[60,484,485],{"class":62,"line":88},[60,486,73],{"emptyLinePlaceholder":72},[60,488,489],{"class":62,"line":94},[60,490,73],{"emptyLinePlaceholder":72},[60,492,493],{"class":62,"line":99},[60,494,386],{},[60,496,497],{"class":62,"line":105},[60,498,183],{},[60,500,501],{"class":62,"line":110},[60,502,395],{},[60,504,505],{"class":62,"line":215},[60,506,193],{},[60,508,509],{"class":62,"line":221},[60,510,404],{},[60,512,513],{"class":62,"line":227},[60,514,515],{},"        increment: state => state.count++,\n",[60,517,518],{"class":62,"line":233},[60,519,520],{},"        decrement: state => state.count--\n",[60,522,523],{"class":62,"line":239},[60,524,236],{},[60,526,527],{"class":62,"line":426},[60,528,91],{},[60,530,531],{"class":62,"line":431},[60,532,73],{"emptyLinePlaceholder":72},[60,534,535],{"class":62,"line":436},[60,536,537],{},"new Vue({\n",[60,539,540],{"class":62,"line":442},[60,541,542],{},"    el: \"#app\",\n",[60,544,546],{"class":62,"line":545},19,[60,547,548],{},"    store,  \n",[60,550,552],{"class":62,"line":551},20,[60,553,554],{},"    computed: {\n",[60,556,558],{"class":62,"line":557},21,[60,559,560],{},"        count: function() {\n",[60,562,564],{"class":62,"line":563},22,[60,565,566],{},"            return this.$store.state.count;\n",[60,568,570],{"class":62,"line":569},23,[60,571,419],{},[60,573,575],{"class":62,"line":574},24,[60,576,193],{},[60,578,580],{"class":62,"line":579},25,[60,581,582],{},"     methods: {\n",[60,584,586],{"class":62,"line":585},26,[60,587,588],{},"        increment: function() {\n",[60,590,592],{"class":62,"line":591},27,[60,593,594],{},"            this.$store.commit(\"increment\");\n",[60,596,598],{"class":62,"line":597},28,[60,599,600],{},"        },\n",[60,602,604],{"class":62,"line":603},29,[60,605,606],{},"        decrement: function() {\n",[60,608,610],{"class":62,"line":609},30,[60,611,612],{},"            this.$store.commit(\"decrement\");\n",[60,614,616],{"class":62,"line":615},31,[60,617,419],{},[60,619,621],{"class":62,"line":620},32,[60,622,236],{},[60,624,626],{"class":62,"line":625},33,[60,627,91],{},[18,629,630],{"id":630},"每日一题",[51,632,637],{"className":633,"code":635,"language":636},[634],"language-text","https:\u002F\u002Fgithub.com\u002FWindrunnerMax\u002FEveryDay\n","text",[29,638,635],{"__ignoreMap":56},[18,640,641],{"id":641},"参考",[51,643,646],{"className":644,"code":645,"language":636},[634],"https:\u002F\u002Fvuex.vuejs.org\u002Fzh\u002F\nhttps:\u002F\u002Fwww.jianshu.com\u002Fp\u002Fd296df048a77\nhttps:\u002F\u002Fjuejin.cn\u002Fpost\u002F6844903624137523213\nhttps:\u002F\u002Fsegmentfault.com\u002Fq\u002F1010000013196679\nhttp:\u002F\u002Fysha.me\u002F2018\u002F09\u002F04\u002F%E7%90%86%E8%A7%A3vuex\u002F\nhttps:\u002F\u002Fcn.vuejs.org\u002Fv2\u002Fguide\u002Fstate-management.html\n",[29,647,645],{"__ignoreMap":56},[649,650,651],"style",{},"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);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":56,"searchDepth":69,"depth":69,"links":653},[654,655,656,657,658],{"id":20,"depth":69,"text":20},{"id":35,"depth":69,"text":35},{"id":245,"depth":69,"text":246},{"id":630,"depth":69,"text":630},{"id":641,"depth":69,"text":641},"md",{},"\u002Fvue\u002Fvuex和普通全局对象",{"title":5,"description":16},"Vue\u002FVuex和普通全局对象","mw_6Pz_9lf5tjm4_Um5G0ZGsQtEy4BroPZ7968mtJYg",1791042469136]