[{"data":1,"prerenderedAt":2889},["ShallowReactive",2],{"page-\u002Fvue\u002Fvuex中的核心方法":3},{"id":4,"title":5,"body":6,"description":2882,"extension":2883,"meta":2884,"navigation":274,"path":2885,"seo":2886,"stem":2887,"__hash__":2888},"content\u002FVue\u002FVuex中的核心方法.md","Vuex中的核心方法",{"type":7,"value":8,"toc":2851},"minimark",[9,13,39,43,57,95,98,125,130,143,242,246,255,356,363,430,434,460,463,488,648,652,667,754,758,775,778,795,869,892,917,921,940,958,962,1024,1028,1048,1118,1120,1137,1140,1170,1238,1241,1250,1293,1297,1308,1377,1381,1414,1629,1633,1645,1648,1661,1766,1769,1780,1858,1870,1919,1922,1950,2141,2205,2355,2371,2459,2475,2715,2718,2768,2827,2830,2838,2841,2847],[10,11,5],"h1",{"id":12},"vuex中的核心方法",[14,15,16,20,21,24,25,27,28,31,32,34,35,38],"p",{},[17,18,19],"code",{},"Vuex","是一个专为",[17,22,23],{},"Vue.js","应用程序开发的状态管理模式，其采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。每一个",[17,26,19],{},"应用的核心就是",[17,29,30],{},"store","仓库，",[17,33,30],{},"基本上就是一个容器，它包含着你的应用中大部分的状态",[17,36,37],{},"state","。",[40,41,42],"h2",{"id":42},"描述",[14,44,45,46,49,50,53,54,56],{},"在大量的业务场景下，不同的模块组件之间确实需要共享数据，也需要对其进行修改操作。也就引发软件设计中的矛盾：模块组件之间需要共享数据和数据可能被任意修改导致不可预料的结果。为了解决其矛盾，软件设计上就提出了一种设计和架构思想，将全局状态进行统一的管理，并且需要获取、修改等操作必须按我设计的套路来，就好比马路上必须遵守的交通规则，右行斑马线就是只能右转一个道理，统一了对全局状态管理的唯一入口，使代码结构清晰、更利于维护。状态管理模式从软件设计的角度，就是以一种统一的约定和准则，对全局共享状态数据进行管理和操作的设计理念。你必须按照这种设计理念和架构来对你项目里共享状态数据进行",[17,47,48],{},"CRUD","，所以所谓的状态管理模式就是一种软件设计的一种架构模式。",[51,52],"br",{},"\n关于",[17,55,19],{},"的五个核心概念，在这里可以简单地进行总结：",[58,59,60,66,72,78,87],"ul",{},[61,62,63,65],"li",{},[17,64,37],{},": 基本数据。",[61,67,68,71],{},[17,69,70],{},"getters",": 从基本数据派生的数据。",[61,73,74,77],{},[17,75,76],{},"mutations",": 提交更改数据的方法，同步操作。",[61,79,80,83,84,86],{},[17,81,82],{},"actions",": 像一个装饰器，包裹",[17,85,76],{},"，使之可以异步。",[61,88,89,92,93,38],{},[17,90,91],{},"modules",": 模块化",[17,94,19],{},[40,96,97],{"id":37},"State",[14,99,100,102,103,105,106,108,109,112,113,115,116,118,119,121,122,124],{},[17,101,19],{},"使用单一状态树，即用一个对象就包含了全部的状态数据，",[17,104,37],{},"作为构造器选项，定义了所有我们需要的基本状态参数，也就是说",[17,107,37],{},"便是唯一数据源",[17,110,111],{},"SSOT","，同样每个应用将仅仅包含一个",[17,114,30],{},"实例。单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。此外单状态树和模块化并不冲突，我们仍然可以将状态和状态变更事件分布到各个子模块中。使用",[17,117,19],{},"并不意味着你需要将所有的状态放入",[17,120,19],{},"，虽然将所有的状态放到",[17,123,19],{},"会使状态变化更显式和易调试，但也会使代码变得冗长和不直观，如果有些状态严格属于单个组件，最好还是作为组件的局部状态。",[126,127,129],"h3",{"id":128},"在vue组件中获得vuex状态","在Vue组件中获得Vuex状态",[14,131,132,133,135,136,138,139,142],{},"从",[17,134,30],{},"实例中读取状态最简单的方法就是在计算属性中返回某个状态，由于",[17,137,19],{},"的状态存储是响应式的，所以在这里每当",[17,140,141],{},"store.state.count","变化的时候，都会重新求取计算属性，进行响应式更新。",[144,145,150],"pre",{"className":146,"code":147,"language":148,"meta":149,"style":149},"language-javascript shiki shiki-themes github-light github-dark","const store = new Vuex.Store({\n    state: {\n        count: 0\n    }\n})\nconst vm = new Vue({\n    \u002F\u002F..\n    store,\n    computed: {\n        count: function(){\n            return this.$store.state.count;\n        }\n    },\n    \u002F\u002F..\n})\n","javascript","",[17,151,152,160,166,172,178,184,190,196,202,208,214,220,226,232,237],{"__ignoreMap":149},[153,154,157],"span",{"class":155,"line":156},"line",1,[153,158,159],{},"const store = new Vuex.Store({\n",[153,161,163],{"class":155,"line":162},2,[153,164,165],{},"    state: {\n",[153,167,169],{"class":155,"line":168},3,[153,170,171],{},"        count: 0\n",[153,173,175],{"class":155,"line":174},4,[153,176,177],{},"    }\n",[153,179,181],{"class":155,"line":180},5,[153,182,183],{},"})\n",[153,185,187],{"class":155,"line":186},6,[153,188,189],{},"const vm = new Vue({\n",[153,191,193],{"class":155,"line":192},7,[153,194,195],{},"    \u002F\u002F..\n",[153,197,199],{"class":155,"line":198},8,[153,200,201],{},"    store,\n",[153,203,205],{"class":155,"line":204},9,[153,206,207],{},"    computed: {\n",[153,209,211],{"class":155,"line":210},10,[153,212,213],{},"        count: function(){\n",[153,215,217],{"class":155,"line":216},11,[153,218,219],{},"            return this.$store.state.count;\n",[153,221,223],{"class":155,"line":222},12,[153,224,225],{},"        }\n",[153,227,229],{"class":155,"line":228},13,[153,230,231],{},"    },\n",[153,233,235],{"class":155,"line":234},14,[153,236,195],{},[153,238,240],{"class":155,"line":239},15,[153,241,183],{},[126,243,245],{"id":244},"mapstate辅助函数","mapState辅助函数",[14,247,248,251,252,254],{},[17,249,250],{},"mapState","函数返回的是一个对象，当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余，为了解决这个问题，我们可以使用",[17,253,250],{},"辅助函数帮助我们生成计算属性。",[144,256,258],{"className":146,"code":257,"language":148,"meta":149,"style":149},"\u002F\u002F 在单独构建的版本中辅助函数为 Vuex.mapState\nimport { mapState } from \"vuex\";\n\nexport default {\n    \u002F\u002F ...\n    computed: mapState({\n      \u002F\u002F 箭头函数\n        count: state => state.count,\n\n        \u002F\u002F 传字符串参数 count 等同于 state => state.count\n        countAlias: \"count\",\n\n        \u002F\u002F 使用 this\n        countPlusLocalState: function(state) {\n            return state.count + this.localCount;\n        }\n    })\n    \u002F\u002F ...\n}\n",[17,259,260,265,270,276,281,286,291,296,301,305,310,315,319,324,329,334,339,345,350],{"__ignoreMap":149},[153,261,262],{"class":155,"line":156},[153,263,264],{},"\u002F\u002F 在单独构建的版本中辅助函数为 Vuex.mapState\n",[153,266,267],{"class":155,"line":162},[153,268,269],{},"import { mapState } from \"vuex\";\n",[153,271,272],{"class":155,"line":168},[153,273,275],{"emptyLinePlaceholder":274},true,"\n",[153,277,278],{"class":155,"line":174},[153,279,280],{},"export default {\n",[153,282,283],{"class":155,"line":180},[153,284,285],{},"    \u002F\u002F ...\n",[153,287,288],{"class":155,"line":186},[153,289,290],{},"    computed: mapState({\n",[153,292,293],{"class":155,"line":192},[153,294,295],{},"      \u002F\u002F 箭头函数\n",[153,297,298],{"class":155,"line":198},[153,299,300],{},"        count: state => state.count,\n",[153,302,303],{"class":155,"line":204},[153,304,275],{"emptyLinePlaceholder":274},[153,306,307],{"class":155,"line":210},[153,308,309],{},"        \u002F\u002F 传字符串参数 count 等同于 state => state.count\n",[153,311,312],{"class":155,"line":216},[153,313,314],{},"        countAlias: \"count\",\n",[153,316,317],{"class":155,"line":222},[153,318,275],{"emptyLinePlaceholder":274},[153,320,321],{"class":155,"line":228},[153,322,323],{},"        \u002F\u002F 使用 this\n",[153,325,326],{"class":155,"line":234},[153,327,328],{},"        countPlusLocalState: function(state) {\n",[153,330,331],{"class":155,"line":239},[153,332,333],{},"            return state.count + this.localCount;\n",[153,335,337],{"class":155,"line":336},16,[153,338,225],{},[153,340,342],{"class":155,"line":341},17,[153,343,344],{},"    })\n",[153,346,348],{"class":155,"line":347},18,[153,349,285],{},[153,351,353],{"class":155,"line":352},19,[153,354,355],{},"}\n",[14,357,358,359,362],{},"如果当前组件中还有局部计算属性需要定义，通常可以使用对象展开运算符",[17,360,361],{},"...","将此对象混入到外部对象中。",[144,364,366],{"className":146,"code":365,"language":148,"meta":149,"style":149},"import { mapState } from \"vuex\";\n\nexport default {\n    \u002F\u002F ...\n    computed: {\n        localComputed: function() { \u002F* ... *\u002F },\n        \u002F\u002F 使用对象展开运算符将此对象混入到外部对象中\n        ...mapState({\n          \u002F\u002F ...\n        })\n        \u002F\u002F ...\n    }\n    \u002F\u002F ...\n}\n",[17,367,368,372,376,380,384,388,393,398,403,408,413,418,422,426],{"__ignoreMap":149},[153,369,370],{"class":155,"line":156},[153,371,269],{},[153,373,374],{"class":155,"line":162},[153,375,275],{"emptyLinePlaceholder":274},[153,377,378],{"class":155,"line":168},[153,379,280],{},[153,381,382],{"class":155,"line":174},[153,383,285],{},[153,385,386],{"class":155,"line":180},[153,387,207],{},[153,389,390],{"class":155,"line":186},[153,391,392],{},"        localComputed: function() { \u002F* ... *\u002F },\n",[153,394,395],{"class":155,"line":192},[153,396,397],{},"        \u002F\u002F 使用对象展开运算符将此对象混入到外部对象中\n",[153,399,400],{"class":155,"line":198},[153,401,402],{},"        ...mapState({\n",[153,404,405],{"class":155,"line":204},[153,406,407],{},"          \u002F\u002F ...\n",[153,409,410],{"class":155,"line":210},[153,411,412],{},"        })\n",[153,414,415],{"class":155,"line":216},[153,416,417],{},"        \u002F\u002F ...\n",[153,419,420],{"class":155,"line":222},[153,421,177],{},[153,423,424],{"class":155,"line":228},[153,425,285],{},[153,427,428],{"class":155,"line":234},[153,429,355],{},[40,431,433],{"id":432},"getter","Getter",[14,435,436,438,439,441,442,444,445,447,448,450,451,453,454,456,457,459],{},[17,437,70],{},"即从",[17,440,30],{},"的",[17,443,37],{},"中派生出的状态，例如我们需要对列表进行过滤并计数，如果有多个组件需要用到某个属性，我们要么复制这个函数，或者抽取到一个共享函数然后在多处导入它，这两种方式无论哪种方式都不是很理想。而",[17,446,19],{},"允许我们在",[17,449,30],{},"中定义",[17,452,432],{},"(可以认为是",[17,455,30],{},"的计算属性)，就像计算属性一样",[17,458,432],{},"的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。",[126,461,462],{"id":462},"访问getters",[14,464,465,467,468,470,471,473,474,476,477,441,480,483,484,441,486,38],{},[17,466,70],{},"接收",[17,469,37],{},"作为其第一个参数，接受其他",[17,472,70],{},"作为第二个参数，如不需要则第二个参数可以省略，与",[17,475,37],{},"一样，我们也可以通过",[17,478,479],{},"Vue",[17,481,482],{},"Computed","获得",[17,485,19],{},[17,487,70],{},[144,489,491],{"className":146,"code":490,"language":148,"meta":149,"style":149},"const store = new Vuex.Store({\n    state: {\n        count:0\n    }，\n    getters: {\n        \u002F\u002F 单个参数\n        countDouble: function(state){\n            return state.count * 2\n        },\n        \u002F\u002F 两个参数\n        countDoubleAndDouble: function(state, getters) {\n            return getters.countDouble * 2\n        }\n    }\n})\n\nconst vm = new Vue({\n    \u002F\u002F..\n    store,\n    computed: {\n        count: function(){\n            return this.$store.state.count;\n        },\n        countDouble: function(){\n            return this.$store.getters.countDouble;\n        },\n        countDoubleAndDouble: function(){\n            return this.$store.getters.countDoubleAndDouble;\n        }\n    },\n    \u002F\u002F..\n})\n",[17,492,493,497,501,506,511,516,521,526,531,536,541,546,551,555,559,563,567,571,575,579,584,589,594,599,605,611,616,622,628,633,638,643],{"__ignoreMap":149},[153,494,495],{"class":155,"line":156},[153,496,159],{},[153,498,499],{"class":155,"line":162},[153,500,165],{},[153,502,503],{"class":155,"line":168},[153,504,505],{},"        count:0\n",[153,507,508],{"class":155,"line":174},[153,509,510],{},"    }，\n",[153,512,513],{"class":155,"line":180},[153,514,515],{},"    getters: {\n",[153,517,518],{"class":155,"line":186},[153,519,520],{},"        \u002F\u002F 单个参数\n",[153,522,523],{"class":155,"line":192},[153,524,525],{},"        countDouble: function(state){\n",[153,527,528],{"class":155,"line":198},[153,529,530],{},"            return state.count * 2\n",[153,532,533],{"class":155,"line":204},[153,534,535],{},"        },\n",[153,537,538],{"class":155,"line":210},[153,539,540],{},"        \u002F\u002F 两个参数\n",[153,542,543],{"class":155,"line":216},[153,544,545],{},"        countDoubleAndDouble: function(state, getters) {\n",[153,547,548],{"class":155,"line":222},[153,549,550],{},"            return getters.countDouble * 2\n",[153,552,553],{"class":155,"line":228},[153,554,225],{},[153,556,557],{"class":155,"line":234},[153,558,177],{},[153,560,561],{"class":155,"line":239},[153,562,183],{},[153,564,565],{"class":155,"line":336},[153,566,275],{"emptyLinePlaceholder":274},[153,568,569],{"class":155,"line":341},[153,570,189],{},[153,572,573],{"class":155,"line":347},[153,574,195],{},[153,576,577],{"class":155,"line":352},[153,578,201],{},[153,580,582],{"class":155,"line":581},20,[153,583,207],{},[153,585,587],{"class":155,"line":586},21,[153,588,213],{},[153,590,592],{"class":155,"line":591},22,[153,593,219],{},[153,595,597],{"class":155,"line":596},23,[153,598,535],{},[153,600,602],{"class":155,"line":601},24,[153,603,604],{},"        countDouble: function(){\n",[153,606,608],{"class":155,"line":607},25,[153,609,610],{},"            return this.$store.getters.countDouble;\n",[153,612,614],{"class":155,"line":613},26,[153,615,535],{},[153,617,619],{"class":155,"line":618},27,[153,620,621],{},"        countDoubleAndDouble: function(){\n",[153,623,625],{"class":155,"line":624},28,[153,626,627],{},"            return this.$store.getters.countDoubleAndDouble;\n",[153,629,631],{"class":155,"line":630},29,[153,632,225],{},[153,634,636],{"class":155,"line":635},30,[153,637,231],{},[153,639,641],{"class":155,"line":640},31,[153,642,195],{},[153,644,646],{"class":155,"line":645},32,[153,647,183],{},[126,649,651],{"id":650},"mapgetters辅助函数","mapGetters辅助函数",[14,653,654,657,658,660,661,663,664,666],{},[17,655,656],{},"mapGetters","辅助函数是将",[17,659,30],{},"中的",[17,662,70],{},"映射到局部计算属性，与",[17,665,37],{},"类似。",[144,668,670],{"className":146,"code":669,"language":148,"meta":149,"style":149},"import { mapGetters } from \"vuex\";\n\nexport default {\n    \u002F\u002F ...\n    computed: {\n        \u002F\u002F 使用对象展开运算符将 getters 混入 computed 对象中\n        ...mapGetters([\n            \"countDouble\",\n            \"CountDoubleAndDouble\",\n            \u002F\u002F..\n        ]),\n        ...mapGetters({\n            \u002F\u002F 映射 this.double 为 store.getters.countDouble\n            double: \"countDouble\"\n        })\n    }\n    \u002F\u002F ...\n}\n",[17,671,672,677,681,685,689,693,698,703,708,713,718,723,728,733,738,742,746,750],{"__ignoreMap":149},[153,673,674],{"class":155,"line":156},[153,675,676],{},"import { mapGetters } from \"vuex\";\n",[153,678,679],{"class":155,"line":162},[153,680,275],{"emptyLinePlaceholder":274},[153,682,683],{"class":155,"line":168},[153,684,280],{},[153,686,687],{"class":155,"line":174},[153,688,285],{},[153,690,691],{"class":155,"line":180},[153,692,207],{},[153,694,695],{"class":155,"line":186},[153,696,697],{},"        \u002F\u002F 使用对象展开运算符将 getters 混入 computed 对象中\n",[153,699,700],{"class":155,"line":192},[153,701,702],{},"        ...mapGetters([\n",[153,704,705],{"class":155,"line":198},[153,706,707],{},"            \"countDouble\",\n",[153,709,710],{"class":155,"line":204},[153,711,712],{},"            \"CountDoubleAndDouble\",\n",[153,714,715],{"class":155,"line":210},[153,716,717],{},"            \u002F\u002F..\n",[153,719,720],{"class":155,"line":216},[153,721,722],{},"        ]),\n",[153,724,725],{"class":155,"line":222},[153,726,727],{},"        ...mapGetters({\n",[153,729,730],{"class":155,"line":228},[153,731,732],{},"            \u002F\u002F 映射 this.double 为 store.getters.countDouble\n",[153,734,735],{"class":155,"line":234},[153,736,737],{},"            double: \"countDouble\"\n",[153,739,740],{"class":155,"line":239},[153,741,412],{},[153,743,744],{"class":155,"line":336},[153,745,177],{},[153,747,748],{"class":155,"line":341},[153,749,285],{},[153,751,752],{"class":155,"line":347},[153,753,355],{},[40,755,757],{"id":756},"mutation","Mutation",[14,759,760,761,763,764,660,766,768,769,771,772,38],{},"提交",[17,762,756],{},"是更改",[17,765,19],{},[17,767,30],{},"中的状态的唯一方法，",[17,770,756],{},"必须是同步的，如果要异步需要使用",[17,773,774],{},"action",[126,776,777],{"id":777},"定义mutation",[14,779,780,781,783,784,787,788,791,792,794],{},"每个",[17,782,756],{},"都有一个字符串的事件类型",[17,785,786],{},"type","和一个回调函数",[17,789,790],{},"handler","，这个回调函数就是我们实际进行状态更改的地方，并且它会接受",[17,793,37],{},"作为第一个参数，提交载荷作为第二个参数(提交荷载在大多数情况下应该是一个对象)，提交荷载也可以省略的。",[144,796,798],{"className":146,"code":797,"language":148,"meta":149,"style":149},"const store = new Vuex.Store({\n    state: {\n        count: 1\n    },\n    mutations: {\n        \u002F\u002F 无提交荷载\n        increment: function(state) {\n            state.count++;\n        },\n        \u002F\u002F 提交荷载\n        incrementN: function(state, payload) {\n            state.count += payload.n;\n        }\n     }\n})\n",[17,799,800,804,808,813,817,822,827,832,837,841,846,851,856,860,865],{"__ignoreMap":149},[153,801,802],{"class":155,"line":156},[153,803,159],{},[153,805,806],{"class":155,"line":162},[153,807,165],{},[153,809,810],{"class":155,"line":168},[153,811,812],{},"        count: 1\n",[153,814,815],{"class":155,"line":174},[153,816,231],{},[153,818,819],{"class":155,"line":180},[153,820,821],{},"    mutations: {\n",[153,823,824],{"class":155,"line":186},[153,825,826],{},"        \u002F\u002F 无提交荷载\n",[153,828,829],{"class":155,"line":192},[153,830,831],{},"        increment: function(state) {\n",[153,833,834],{"class":155,"line":198},[153,835,836],{},"            state.count++;\n",[153,838,839],{"class":155,"line":204},[153,840,535],{},[153,842,843],{"class":155,"line":210},[153,844,845],{},"        \u002F\u002F 提交荷载\n",[153,847,848],{"class":155,"line":216},[153,849,850],{},"        incrementN: function(state, payload) {\n",[153,852,853],{"class":155,"line":222},[153,854,855],{},"            state.count += payload.n;\n",[153,857,858],{"class":155,"line":228},[153,859,225],{},[153,861,862],{"class":155,"line":234},[153,863,864],{},"     }\n",[153,866,867],{"class":155,"line":239},[153,868,183],{},[14,870,871,872,875,876,441,879,881,882,884,885,887,888,891],{},"你不能直接调用一个",[17,873,874],{},"mutation handler","，这个选项更像是事件注册，当触发一个类型为",[17,877,878],{},"increment",[17,880,756],{},"时，调用此函数，要唤醒一个",[17,883,874],{},"，你需要以相应的",[17,886,786],{},"调用",[17,889,890],{},"store.commit","方法。",[144,893,895],{"className":146,"code":894,"language":148,"meta":149,"style":149},"\u002F\u002F无提交荷载\nthis.$store.commit(\"increment\");\n\u002F\u002F提交荷载\nthis.$store.commit(\"incrementN\", { n: 100 });\n",[17,896,897,902,907,912],{"__ignoreMap":149},[153,898,899],{"class":155,"line":156},[153,900,901],{},"\u002F\u002F无提交荷载\n",[153,903,904],{"class":155,"line":162},[153,905,906],{},"this.$store.commit(\"increment\");\n",[153,908,909],{"class":155,"line":168},[153,910,911],{},"\u002F\u002F提交荷载\n",[153,913,914],{"class":155,"line":174},[153,915,916],{},"this.$store.commit(\"incrementN\", { n: 100 });\n",[126,918,920],{"id":919},"mutations需遵守vue的响应规则","Mutations需遵守Vue的响应规则",[14,922,923,924,441,926,928,929,931,932,660,934,936,937,939],{},"既然",[17,925,19],{},[17,927,30],{},"中的状态是响应式的，那么当我们变更状态时，监视状态的",[17,930,479],{},"组件也会自动更新，这也意味着",[17,933,19],{},[17,935,756],{},"也需要与使用",[17,938,479],{},"一样遵守一些注意事项：",[58,941,942,948],{},[61,943,944,945,947],{},"最好提前在你的",[17,946,30],{},"中初始化好所有所需属性。",[61,949,950,951,954,955,38],{},"当需要在对象上添加新属性时，应该使用",[17,952,953],{},"Vue.set(obj, \"newProp\", 1)",", 或者以新对象替换老对象，例如",[17,956,957],{},"state.obj = { ...state.obj, newProp: 1 }",[126,959,961],{"id":960},"mutation必须是同步函数","Mutation必须是同步函数",[14,963,964,965,967,968,971,972,975,976,660,979,981,982,984,985,988,989,991,992,994,995,997,998,1000,1001,1003,1004,1006,1007,1009,1010,1013,1014,1016,1017,1019,1020,1023],{},"一条重要的原则就是",[17,966,756],{},"必须是同步函数，假如我们正在",[17,969,970],{},"debug","一个",[17,973,974],{},"app","并且观察",[17,977,978],{},"devtool",[17,980,756],{},"日志，每一条",[17,983,756],{},"被记录，",[17,986,987],{},"devtools","都需要捕捉到前一状态和后一状态的快照，然而如果在",[17,990,756],{},"中使用异步函数中的回调让这不可能完成，因为当",[17,993,756],{},"触发的时候，回调函数还没有被调用，",[17,996,987],{},"不知道什么时候回调函数实际上被调用，实质上任何在回调函数中进行的状态的改变都是不可追踪的。",[51,999],{},"\n在",[17,1002,756],{},"中混合异步调用会导致你的程序很难调试，当你调用了两个包含异步回调的",[17,1005,756],{},"来改变状态，你无法知道什么时候回调和哪个先回调，这就是为什么要区分",[17,1008,757],{},"和",[17,1011,1012],{},"Action","这两个概念，在",[17,1015,19],{},"中，",[17,1018,756],{},"都是同步事务，任何由提交的",[17,1021,1022],{},"key","导致的状态变更都应该在此刻完成。",[126,1025,1027],{"id":1026},"mapmutations辅助函数","mapMutations辅助函数",[14,1029,1030,1031,760,1034,1036,1037,1040,1041,1044,1045,1047],{},"与其他辅助函数类似，你可以在组件中使用",[17,1032,1033],{},"this.$store.commit(\"xxx\")",[17,1035,756],{},"，或者使用",[17,1038,1039],{},"mapMutations","辅助函数将组件中的",[17,1042,1043],{},"methods","映射为",[17,1046,890],{},"调用。",[144,1049,1051],{"className":146,"code":1050,"language":148,"meta":149,"style":149},"import { mapMutations } from \"vuex\";\n\nexport default {\n    \u002F\u002F..\n    methods: {\n        ...mapMutations([\n            \"increment\" \u002F\u002F 映射 this.increment() 为 this.$store.commit(\"increment\")\n        ]),\n        ...mapMutations({\n            add: \"increment\" \u002F\u002F 映射 this.add() 为 this.$store.commit(\"increment\")\n        })\n    }\n    \u002F\u002F ...\n}\n",[17,1052,1053,1058,1062,1066,1070,1075,1080,1088,1092,1097,1102,1106,1110,1114],{"__ignoreMap":149},[153,1054,1055],{"class":155,"line":156},[153,1056,1057],{},"import { mapMutations } from \"vuex\";\n",[153,1059,1060],{"class":155,"line":162},[153,1061,275],{"emptyLinePlaceholder":274},[153,1063,1064],{"class":155,"line":168},[153,1065,280],{},[153,1067,1068],{"class":155,"line":174},[153,1069,195],{},[153,1071,1072],{"class":155,"line":180},[153,1073,1074],{},"    methods: {\n",[153,1076,1077],{"class":155,"line":186},[153,1078,1079],{},"        ...mapMutations([\n",[153,1081,1082,1085],{"class":155,"line":192},[153,1083,1084],{},"            \"increment\"",[153,1086,1087],{}," \u002F\u002F 映射 this.increment() 为 this.$store.commit(\"increment\")\n",[153,1089,1090],{"class":155,"line":198},[153,1091,722],{},[153,1093,1094],{"class":155,"line":204},[153,1095,1096],{},"        ...mapMutations({\n",[153,1098,1099],{"class":155,"line":210},[153,1100,1101],{},"            add: \"increment\" \u002F\u002F 映射 this.add() 为 this.$store.commit(\"increment\")\n",[153,1103,1104],{"class":155,"line":216},[153,1105,412],{},[153,1107,1108],{"class":155,"line":222},[153,1109,177],{},[153,1111,1112],{"class":155,"line":228},[153,1113,285],{},[153,1115,1116],{"class":155,"line":234},[153,1117,355],{},[40,1119,1012],{"id":774},[14,1121,1122,1124,1125,1127,1128,1130,1131,1133,1134,1136],{},[17,1123,1012],{},"类似于",[17,1126,756],{},"，不同在于",[17,1129,1012],{},"提交的是",[17,1132,756],{},"，而不是直接变更状态，而且",[17,1135,1012],{},"可以包含任意异步操作。",[126,1138,1139],{"id":1139},"注册actions",[14,1141,1142,1144,1145,1147,1148,1151,1152,1155,1156,1158,1159,1009,1162,1165,1166,1009,1168,38],{},[17,1143,1012],{},"函数接受一个与",[17,1146,30],{},"实例具有相同方法和属性的",[17,1149,1150],{},"context","对象，因此你可以调用",[17,1153,1154],{},"context.commit","提交一个",[17,1157,756],{},"，或者通过",[17,1160,1161],{},"context.state",[17,1163,1164],{},"context.getters","来获取",[17,1167,37],{},[17,1169,70],{},[144,1171,1173],{"className":146,"code":1172,"language":148,"meta":149,"style":149},"const store = new Vuex.Store({\n    state: {\n        count: 0\n    },\n    mutations: {\n        increment: function(state) {\n            state.count++;\n        }\n    },\n    actions: {\n        increment: function(context) {\n            setInterval(() => context.commit(\"increment\"), 1000);\n        }\n    }\n})\n",[17,1174,1175,1179,1183,1187,1191,1195,1199,1203,1207,1211,1216,1221,1226,1230,1234],{"__ignoreMap":149},[153,1176,1177],{"class":155,"line":156},[153,1178,159],{},[153,1180,1181],{"class":155,"line":162},[153,1182,165],{},[153,1184,1185],{"class":155,"line":168},[153,1186,171],{},[153,1188,1189],{"class":155,"line":174},[153,1190,231],{},[153,1192,1193],{"class":155,"line":180},[153,1194,821],{},[153,1196,1197],{"class":155,"line":186},[153,1198,831],{},[153,1200,1201],{"class":155,"line":192},[153,1202,836],{},[153,1204,1205],{"class":155,"line":198},[153,1206,225],{},[153,1208,1209],{"class":155,"line":204},[153,1210,231],{},[153,1212,1213],{"class":155,"line":210},[153,1214,1215],{},"    actions: {\n",[153,1217,1218],{"class":155,"line":216},[153,1219,1220],{},"        increment: function(context) {\n",[153,1222,1223],{"class":155,"line":222},[153,1224,1225],{},"            setInterval(() => context.commit(\"increment\"), 1000);\n",[153,1227,1228],{"class":155,"line":228},[153,1229,225],{},[153,1231,1232],{"class":155,"line":234},[153,1233,177],{},[153,1235,1236],{"class":155,"line":239},[153,1237,183],{},[126,1239,1240],{"id":1240},"分发actions",[14,1242,1243,1245,1246,1249],{},[17,1244,1012],{},"通过",[17,1247,1248],{},"store.dispatch","方法触发，同样也支持以载荷方式和对象方式进行分发。",[144,1251,1253],{"className":146,"code":1252,"language":148,"meta":149,"style":149},"\u002F\u002F 分发\nthis.$store.dispatch(\"increment\");\n\n\u002F\u002F 以载荷形式分发\nstore.dispatch(\"incrementN\", { n: 10 });\n\n\u002F\u002F 以对象形式分发\nstore.dispatch({ type: \"incrementN\", n: 10 });\n",[17,1254,1255,1260,1265,1269,1274,1279,1283,1288],{"__ignoreMap":149},[153,1256,1257],{"class":155,"line":156},[153,1258,1259],{},"\u002F\u002F 分发\n",[153,1261,1262],{"class":155,"line":162},[153,1263,1264],{},"this.$store.dispatch(\"increment\");\n",[153,1266,1267],{"class":155,"line":168},[153,1268,275],{"emptyLinePlaceholder":274},[153,1270,1271],{"class":155,"line":174},[153,1272,1273],{},"\u002F\u002F 以载荷形式分发\n",[153,1275,1276],{"class":155,"line":180},[153,1277,1278],{},"store.dispatch(\"incrementN\", { n: 10 });\n",[153,1280,1281],{"class":155,"line":186},[153,1282,275],{"emptyLinePlaceholder":274},[153,1284,1285],{"class":155,"line":192},[153,1286,1287],{},"\u002F\u002F 以对象形式分发\n",[153,1289,1290],{"class":155,"line":198},[153,1291,1292],{},"store.dispatch({ type: \"incrementN\", n: 10 });\n",[126,1294,1296],{"id":1295},"mapactions辅助函数","mapActions辅助函数",[14,1298,1299,1300,1303,1304,1044,1306,1047],{},"使用",[17,1301,1302],{},"mapActions","辅助函数可以将组件的",[17,1305,1043],{},[17,1307,1248],{},[144,1309,1311],{"className":146,"code":1310,"language":148,"meta":149,"style":149},"import { mapActions } from \"vuex\";\n\nexport default {\n    \u002F\u002F..\n    methods: {\n        ...mapActions([\n            \"incrementN\" \u002F\u002F映射 this.incrementN() 为 this.$store.dispatch(\"incrementN\")\n        ]),\n        ...mapActions({\n            add: \"incrementN\" \u002F\u002F映射 this.add() 为 this.$store.dispatch(\"incrementN\")\n        })\n    }\n    \u002F\u002F ...\n}\n",[17,1312,1313,1318,1322,1326,1330,1334,1339,1347,1351,1356,1361,1365,1369,1373],{"__ignoreMap":149},[153,1314,1315],{"class":155,"line":156},[153,1316,1317],{},"import { mapActions } from \"vuex\";\n",[153,1319,1320],{"class":155,"line":162},[153,1321,275],{"emptyLinePlaceholder":274},[153,1323,1324],{"class":155,"line":168},[153,1325,280],{},[153,1327,1328],{"class":155,"line":174},[153,1329,195],{},[153,1331,1332],{"class":155,"line":180},[153,1333,1074],{},[153,1335,1336],{"class":155,"line":186},[153,1337,1338],{},"        ...mapActions([\n",[153,1340,1341,1344],{"class":155,"line":192},[153,1342,1343],{},"            \"incrementN\"",[153,1345,1346],{}," \u002F\u002F映射 this.incrementN() 为 this.$store.dispatch(\"incrementN\")\n",[153,1348,1349],{"class":155,"line":198},[153,1350,722],{},[153,1352,1353],{"class":155,"line":204},[153,1354,1355],{},"        ...mapActions({\n",[153,1357,1358],{"class":155,"line":210},[153,1359,1360],{},"            add: \"incrementN\" \u002F\u002F映射 this.add() 为 this.$store.dispatch(\"incrementN\")\n",[153,1362,1363],{"class":155,"line":216},[153,1364,412],{},[153,1366,1367],{"class":155,"line":222},[153,1368,177],{},[153,1370,1371],{"class":155,"line":228},[153,1372,285],{},[153,1374,1375],{"class":155,"line":234},[153,1376,355],{},[126,1378,1380],{"id":1379},"组合action","组合Action",[14,1382,1383,1385,1386,1388,1389,1391,1392,1394,1395,1398,1399,1401,1402,1404,1405,1407,1408,1410,1411,1413],{},[17,1384,1012],{},"通常是异步的，在一些场景下我们需要组合",[17,1387,1012],{},"用以处理更加复杂的异步流程，",[17,1390,1248],{},"可以处理被触发的",[17,1393,774],{},"的处理函数返回的",[17,1396,1397],{},"Promise","，并且",[17,1400,1248],{},"仍旧返回",[17,1403,1397],{},"。一个",[17,1406,1248],{},"在不同模块中可以触发多个",[17,1409,774],{},"函数，在这种情况下，只有当所有触发函数完成后，返回的",[17,1412,1397],{},"才会执行。",[144,1415,1417],{"className":146,"code":1416,"language":148,"meta":149,"style":149},"\u002F\u002F ...\nactions: {\n    actionA: function({ commit }) {\n        return new Promise((resolve, reject) => {\n            setTimeout(() => {\n                commit(\"someMutation\");\n                resolve();\n            }, 1000)\n        })\n    }\n}\n\u002F\u002F ...\n\n\u002F\u002F 在触发Actions时\n\u002F\u002F ...\nstore.dispatch(\"actionA\").then(() => {\n  \u002F\u002F ...\n})\n\u002F\u002F ...\n\n\u002F\u002F 在另外一个 action 中\n\u002F\u002F ...\nactions: {\n    \u002F\u002F ...\n    actionB: function({ dispatch, commit }) {\n        return dispatch(\"actionA\").then(() => {\n            commit(\"someOtherMutation\");\n        })\n    }\n}\n\u002F\u002F ...\n\n\u002F\u002F 使用 async\u002Fawait\n\u002F\u002F 当然此时getData()和getOtherData()需要返回Promise\nactions: {\n    actionA: async function({ commit }) {\n        commit(\"gotData\", await getData());\n    },\n    actionB: async function({ dispatch, commit }) {\n        await dispatch(\"actionA\");\n        commit(\"gotOtherData\", await getOtherData());\n    }\n}\n\u002F\u002F ...\n",[17,1418,1419,1424,1429,1434,1439,1444,1449,1454,1459,1463,1467,1471,1475,1479,1484,1488,1493,1498,1502,1506,1510,1515,1519,1523,1527,1532,1537,1542,1546,1550,1554,1558,1562,1568,1574,1579,1585,1591,1596,1602,1608,1614,1619,1624],{"__ignoreMap":149},[153,1420,1421],{"class":155,"line":156},[153,1422,1423],{},"\u002F\u002F ...\n",[153,1425,1426],{"class":155,"line":162},[153,1427,1428],{},"actions: {\n",[153,1430,1431],{"class":155,"line":168},[153,1432,1433],{},"    actionA: function({ commit }) {\n",[153,1435,1436],{"class":155,"line":174},[153,1437,1438],{},"        return new Promise((resolve, reject) => {\n",[153,1440,1441],{"class":155,"line":180},[153,1442,1443],{},"            setTimeout(() => {\n",[153,1445,1446],{"class":155,"line":186},[153,1447,1448],{},"                commit(\"someMutation\");\n",[153,1450,1451],{"class":155,"line":192},[153,1452,1453],{},"                resolve();\n",[153,1455,1456],{"class":155,"line":198},[153,1457,1458],{},"            }, 1000)\n",[153,1460,1461],{"class":155,"line":204},[153,1462,412],{},[153,1464,1465],{"class":155,"line":210},[153,1466,177],{},[153,1468,1469],{"class":155,"line":216},[153,1470,355],{},[153,1472,1473],{"class":155,"line":222},[153,1474,1423],{},[153,1476,1477],{"class":155,"line":228},[153,1478,275],{"emptyLinePlaceholder":274},[153,1480,1481],{"class":155,"line":234},[153,1482,1483],{},"\u002F\u002F 在触发Actions时\n",[153,1485,1486],{"class":155,"line":239},[153,1487,1423],{},[153,1489,1490],{"class":155,"line":336},[153,1491,1492],{},"store.dispatch(\"actionA\").then(() => {\n",[153,1494,1495],{"class":155,"line":341},[153,1496,1497],{},"  \u002F\u002F ...\n",[153,1499,1500],{"class":155,"line":347},[153,1501,183],{},[153,1503,1504],{"class":155,"line":352},[153,1505,1423],{},[153,1507,1508],{"class":155,"line":581},[153,1509,275],{"emptyLinePlaceholder":274},[153,1511,1512],{"class":155,"line":586},[153,1513,1514],{},"\u002F\u002F 在另外一个 action 中\n",[153,1516,1517],{"class":155,"line":591},[153,1518,1423],{},[153,1520,1521],{"class":155,"line":596},[153,1522,1428],{},[153,1524,1525],{"class":155,"line":601},[153,1526,285],{},[153,1528,1529],{"class":155,"line":607},[153,1530,1531],{},"    actionB: function({ dispatch, commit }) {\n",[153,1533,1534],{"class":155,"line":613},[153,1535,1536],{},"        return dispatch(\"actionA\").then(() => {\n",[153,1538,1539],{"class":155,"line":618},[153,1540,1541],{},"            commit(\"someOtherMutation\");\n",[153,1543,1544],{"class":155,"line":624},[153,1545,412],{},[153,1547,1548],{"class":155,"line":630},[153,1549,177],{},[153,1551,1552],{"class":155,"line":635},[153,1553,355],{},[153,1555,1556],{"class":155,"line":640},[153,1557,1423],{},[153,1559,1560],{"class":155,"line":645},[153,1561,275],{"emptyLinePlaceholder":274},[153,1563,1565],{"class":155,"line":1564},33,[153,1566,1567],{},"\u002F\u002F 使用 async\u002Fawait\n",[153,1569,1571],{"class":155,"line":1570},34,[153,1572,1573],{},"\u002F\u002F 当然此时getData()和getOtherData()需要返回Promise\n",[153,1575,1577],{"class":155,"line":1576},35,[153,1578,1428],{},[153,1580,1582],{"class":155,"line":1581},36,[153,1583,1584],{},"    actionA: async function({ commit }) {\n",[153,1586,1588],{"class":155,"line":1587},37,[153,1589,1590],{},"        commit(\"gotData\", await getData());\n",[153,1592,1594],{"class":155,"line":1593},38,[153,1595,231],{},[153,1597,1599],{"class":155,"line":1598},39,[153,1600,1601],{},"    actionB: async function({ dispatch, commit }) {\n",[153,1603,1605],{"class":155,"line":1604},40,[153,1606,1607],{},"        await dispatch(\"actionA\");\n",[153,1609,1611],{"class":155,"line":1610},41,[153,1612,1613],{},"        commit(\"gotOtherData\", await getOtherData());\n",[153,1615,1617],{"class":155,"line":1616},42,[153,1618,177],{},[153,1620,1622],{"class":155,"line":1621},43,[153,1623,355],{},[153,1625,1627],{"class":155,"line":1626},44,[153,1628,1423],{},[40,1630,1632],{"id":1631},"module","Module",[14,1634,1635,1636,1638,1639,1641,1642,1644],{},"由于使用单一状态树，应用的所有状态会集中到一个比较大的对象，当应用变得非常复杂时，",[17,1637,30],{},"对象就有可能变得相当臃肿，为了解决以上问题，",[17,1640,19],{},"允许我们将",[17,1643,30],{},"分割成模块。",[126,1646,1647],{"id":1647},"模块分割",[14,1649,1650,1651,1653,1654,1653,1656,1653,1658,1660],{},"当进行模块分割时，每个模块拥有自己的",[17,1652,37],{},"、",[17,1655,756],{},[17,1657,774],{},[17,1659,432],{},"，甚至是嵌套子模块，即从上至下进行同样方式的分割。",[144,1662,1664],{"className":146,"code":1663,"language":148,"meta":149,"style":149},"const moduleA = {\n    state: () => ({ \u002F* ... *\u002F }),\n    mutations: { \u002F* ... *\u002F },\n    actions: { \u002F* ... *\u002F },\n    getters: { \u002F* ... *\u002F }\n}\n\nconst moduleB = {\n    state: () => ({ \u002F* ... *\u002F }),\n    mutations: { \u002F* ... *\u002F },\n    actions: { \u002F* ... *\u002F }\n}\n\nconst store = new Vuex.Store({\n    modules: {\n        a: moduleA,\n        b: moduleB\n    }\n})\n\nstore.state.a \u002F\u002F -> moduleA 的状态\nstore.state.b \u002F\u002F -> moduleB 的状态\n",[17,1665,1666,1671,1676,1681,1686,1691,1695,1699,1704,1708,1712,1717,1721,1725,1729,1734,1739,1744,1748,1752,1756,1761],{"__ignoreMap":149},[153,1667,1668],{"class":155,"line":156},[153,1669,1670],{},"const moduleA = {\n",[153,1672,1673],{"class":155,"line":162},[153,1674,1675],{},"    state: () => ({ \u002F* ... *\u002F }),\n",[153,1677,1678],{"class":155,"line":168},[153,1679,1680],{},"    mutations: { \u002F* ... *\u002F },\n",[153,1682,1683],{"class":155,"line":174},[153,1684,1685],{},"    actions: { \u002F* ... *\u002F },\n",[153,1687,1688],{"class":155,"line":180},[153,1689,1690],{},"    getters: { \u002F* ... *\u002F }\n",[153,1692,1693],{"class":155,"line":186},[153,1694,355],{},[153,1696,1697],{"class":155,"line":192},[153,1698,275],{"emptyLinePlaceholder":274},[153,1700,1701],{"class":155,"line":198},[153,1702,1703],{},"const moduleB = {\n",[153,1705,1706],{"class":155,"line":204},[153,1707,1675],{},[153,1709,1710],{"class":155,"line":210},[153,1711,1680],{},[153,1713,1714],{"class":155,"line":216},[153,1715,1716],{},"    actions: { \u002F* ... *\u002F }\n",[153,1718,1719],{"class":155,"line":222},[153,1720,355],{},[153,1722,1723],{"class":155,"line":228},[153,1724,275],{"emptyLinePlaceholder":274},[153,1726,1727],{"class":155,"line":234},[153,1728,159],{},[153,1730,1731],{"class":155,"line":239},[153,1732,1733],{},"    modules: {\n",[153,1735,1736],{"class":155,"line":336},[153,1737,1738],{},"        a: moduleA,\n",[153,1740,1741],{"class":155,"line":341},[153,1742,1743],{},"        b: moduleB\n",[153,1745,1746],{"class":155,"line":347},[153,1747,177],{},[153,1749,1750],{"class":155,"line":352},[153,1751,183],{},[153,1753,1754],{"class":155,"line":581},[153,1755,275],{"emptyLinePlaceholder":274},[153,1757,1758],{"class":155,"line":586},[153,1759,1760],{},"store.state.a \u002F\u002F -> moduleA 的状态\n",[153,1762,1763],{"class":155,"line":591},[153,1764,1765],{},"store.state.b \u002F\u002F -> moduleB 的状态\n",[126,1767,1768],{"id":1768},"模块的局部状态",[14,1770,1771,1772,1009,1774,1776,1777,1779],{},"对于模块内部的",[17,1773,756],{},[17,1775,432],{},"，接收的第一个参数是模块的局部状态，对于模块内部的",[17,1778,432],{},"，根节点状态会作为第三个参数。",[144,1781,1783],{"className":146,"code":1782,"language":148,"meta":149,"style":149},"const moduleA = {\n    state: { count: 0 },\n    mutations: {\n        increment: function(state) {\n            \u002F\u002F state 模块的局部状态\n            state.count++;\n        }\n    },\n    getters: {\n        doubleCount: function(state) {\n            return state.count * 2\n        },\n        sumWithRootCount: function(state, getters, rootState) {\n            return state.count + rootState.count;\n        }\n    }\n}\n",[17,1784,1785,1789,1794,1798,1802,1807,1811,1815,1819,1823,1828,1832,1836,1841,1846,1850,1854],{"__ignoreMap":149},[153,1786,1787],{"class":155,"line":156},[153,1788,1670],{},[153,1790,1791],{"class":155,"line":162},[153,1792,1793],{},"    state: { count: 0 },\n",[153,1795,1796],{"class":155,"line":168},[153,1797,821],{},[153,1799,1800],{"class":155,"line":174},[153,1801,831],{},[153,1803,1804],{"class":155,"line":180},[153,1805,1806],{},"            \u002F\u002F state 模块的局部状态\n",[153,1808,1809],{"class":155,"line":186},[153,1810,836],{},[153,1812,1813],{"class":155,"line":192},[153,1814,225],{},[153,1816,1817],{"class":155,"line":198},[153,1818,231],{},[153,1820,1821],{"class":155,"line":204},[153,1822,515],{},[153,1824,1825],{"class":155,"line":210},[153,1826,1827],{},"        doubleCount: function(state) {\n",[153,1829,1830],{"class":155,"line":216},[153,1831,530],{},[153,1833,1834],{"class":155,"line":222},[153,1835,535],{},[153,1837,1838],{"class":155,"line":228},[153,1839,1840],{},"        sumWithRootCount: function(state, getters, rootState) {\n",[153,1842,1843],{"class":155,"line":234},[153,1844,1845],{},"            return state.count + rootState.count;\n",[153,1847,1848],{"class":155,"line":239},[153,1849,225],{},[153,1851,1852],{"class":155,"line":336},[153,1853,177],{},[153,1855,1856],{"class":155,"line":341},[153,1857,355],{},[14,1859,1860,1861,1863,1864,1866,1867,38],{},"同样对于模块内部的",[17,1862,774],{},"，局部状态通过",[17,1865,1161],{},"暴露出来，根节点状态则为",[17,1868,1869],{},"context.rootState",[144,1871,1873],{"className":146,"code":1872,"language":148,"meta":149,"style":149},"const moduleA = {\n    \u002F\u002F ...\n    actions: {\n        incrementIfOddOnRootSum: function({ state, commit, rootState }) {\n            if ((state.count + rootState.count) % 2 === 1) {\n                commit(\"increment\");\n            }\n        }\n    }\n}\n",[17,1874,1875,1879,1883,1887,1892,1897,1902,1907,1911,1915],{"__ignoreMap":149},[153,1876,1877],{"class":155,"line":156},[153,1878,1670],{},[153,1880,1881],{"class":155,"line":162},[153,1882,285],{},[153,1884,1885],{"class":155,"line":168},[153,1886,1215],{},[153,1888,1889],{"class":155,"line":174},[153,1890,1891],{},"        incrementIfOddOnRootSum: function({ state, commit, rootState }) {\n",[153,1893,1894],{"class":155,"line":180},[153,1895,1896],{},"            if ((state.count + rootState.count) % 2 === 1) {\n",[153,1898,1899],{"class":155,"line":186},[153,1900,1901],{},"                commit(\"increment\");\n",[153,1903,1904],{"class":155,"line":192},[153,1905,1906],{},"            }\n",[153,1908,1909],{"class":155,"line":198},[153,1910,225],{},[153,1912,1913],{"class":155,"line":204},[153,1914,177],{},[153,1916,1917],{"class":155,"line":210},[153,1918,355],{},[126,1920,1921],{"id":1921},"命名空间",[14,1923,1924,1925,1653,1927,1009,1929,1931,1932,1934,1935,1937,1938,1941,1942,1653,1944,1946,1947,1949],{},"默认情况下，模块内部的",[17,1926,774],{},[17,1928,756],{},[17,1930,432],{},"是注册在全局命名空间的——这样使得多个模块能够对同一",[17,1933,756],{},"或",[17,1936,774],{},"作出响应。如果希望你的模块具有更高的封装度和复用性，你可以通过添加",[17,1939,1940],{},"namespaced: true","的方式使其成为带命名空间的模块，当模块被注册后，它的所有",[17,1943,432],{},[17,1945,774],{},"及",[17,1948,756],{},"都会自动根据模块注册的路径调整命名。",[144,1951,1953],{"className":146,"code":1952,"language":148,"meta":149,"style":149},"const store = new Vuex.Store({\n    modules: {\n        account: {\n            namespaced: true,\n\n            \u002F\u002F 模块内容(module assets)\n            state: () => ({ ... }), \u002F\u002F 模块内的状态已经是嵌套的了，使用 `namespaced` 属性不会对其产生影响\n            getters: {\n                isAdmin: function() { ... } \u002F\u002F -> getters['account\u002FisAdmin']\n            },\n            actions: {\n                login: function() { ... } \u002F\u002F -> dispatch('account\u002Flogin')\n            },\n            mutations: {\n                login: function() { ... } \u002F\u002F -> commit('account\u002Flogin')\n            },\n\n            \u002F\u002F 嵌套模块\n            modules: {\n                \u002F\u002F 继承父模块的命名空间\n                myPage: {\n                    state: () => ({ ... }),\n                    getters: {\n                        profile: function() { ... } \u002F\u002F -> getters['account\u002Fprofile']\n                    }\n                },\n    \n                \u002F\u002F 进一步嵌套命名空间\n                posts: {\n                    namespaced: true,\n    \n                    state: () => ({ ... }),\n                    getters: {\n                        popular: function() { ... } \u002F\u002F -> getters['account\u002Fposts\u002Fpopular']\n                    }\n                }\n            }\n        }\n    }\n})\n",[17,1954,1955,1959,1963,1968,1973,1977,1982,1987,1992,1997,2002,2007,2012,2016,2021,2026,2030,2034,2039,2044,2049,2054,2059,2064,2069,2074,2079,2084,2089,2094,2099,2103,2107,2111,2116,2120,2125,2129,2133,2137],{"__ignoreMap":149},[153,1956,1957],{"class":155,"line":156},[153,1958,159],{},[153,1960,1961],{"class":155,"line":162},[153,1962,1733],{},[153,1964,1965],{"class":155,"line":168},[153,1966,1967],{},"        account: {\n",[153,1969,1970],{"class":155,"line":174},[153,1971,1972],{},"            namespaced: true,\n",[153,1974,1975],{"class":155,"line":180},[153,1976,275],{"emptyLinePlaceholder":274},[153,1978,1979],{"class":155,"line":186},[153,1980,1981],{},"            \u002F\u002F 模块内容(module assets)\n",[153,1983,1984],{"class":155,"line":192},[153,1985,1986],{},"            state: () => ({ ... }), \u002F\u002F 模块内的状态已经是嵌套的了，使用 `namespaced` 属性不会对其产生影响\n",[153,1988,1989],{"class":155,"line":198},[153,1990,1991],{},"            getters: {\n",[153,1993,1994],{"class":155,"line":204},[153,1995,1996],{},"                isAdmin: function() { ... } \u002F\u002F -> getters['account\u002FisAdmin']\n",[153,1998,1999],{"class":155,"line":210},[153,2000,2001],{},"            },\n",[153,2003,2004],{"class":155,"line":216},[153,2005,2006],{},"            actions: {\n",[153,2008,2009],{"class":155,"line":222},[153,2010,2011],{},"                login: function() { ... } \u002F\u002F -> dispatch('account\u002Flogin')\n",[153,2013,2014],{"class":155,"line":228},[153,2015,2001],{},[153,2017,2018],{"class":155,"line":234},[153,2019,2020],{},"            mutations: {\n",[153,2022,2023],{"class":155,"line":239},[153,2024,2025],{},"                login: function() { ... } \u002F\u002F -> commit('account\u002Flogin')\n",[153,2027,2028],{"class":155,"line":336},[153,2029,2001],{},[153,2031,2032],{"class":155,"line":341},[153,2033,275],{"emptyLinePlaceholder":274},[153,2035,2036],{"class":155,"line":347},[153,2037,2038],{},"            \u002F\u002F 嵌套模块\n",[153,2040,2041],{"class":155,"line":352},[153,2042,2043],{},"            modules: {\n",[153,2045,2046],{"class":155,"line":581},[153,2047,2048],{},"                \u002F\u002F 继承父模块的命名空间\n",[153,2050,2051],{"class":155,"line":586},[153,2052,2053],{},"                myPage: {\n",[153,2055,2056],{"class":155,"line":591},[153,2057,2058],{},"                    state: () => ({ ... }),\n",[153,2060,2061],{"class":155,"line":596},[153,2062,2063],{},"                    getters: {\n",[153,2065,2066],{"class":155,"line":601},[153,2067,2068],{},"                        profile: function() { ... } \u002F\u002F -> getters['account\u002Fprofile']\n",[153,2070,2071],{"class":155,"line":607},[153,2072,2073],{},"                    }\n",[153,2075,2076],{"class":155,"line":613},[153,2077,2078],{},"                },\n",[153,2080,2081],{"class":155,"line":618},[153,2082,2083],{},"    \n",[153,2085,2086],{"class":155,"line":624},[153,2087,2088],{},"                \u002F\u002F 进一步嵌套命名空间\n",[153,2090,2091],{"class":155,"line":630},[153,2092,2093],{},"                posts: {\n",[153,2095,2096],{"class":155,"line":635},[153,2097,2098],{},"                    namespaced: true,\n",[153,2100,2101],{"class":155,"line":640},[153,2102,2083],{},[153,2104,2105],{"class":155,"line":645},[153,2106,2058],{},[153,2108,2109],{"class":155,"line":1564},[153,2110,2063],{},[153,2112,2113],{"class":155,"line":1570},[153,2114,2115],{},"                        popular: function() { ... } \u002F\u002F -> getters['account\u002Fposts\u002Fpopular']\n",[153,2117,2118],{"class":155,"line":1576},[153,2119,2073],{},[153,2121,2122],{"class":155,"line":1581},[153,2123,2124],{},"                }\n",[153,2126,2127],{"class":155,"line":1587},[153,2128,1906],{},[153,2130,2131],{"class":155,"line":1593},[153,2132,225],{},[153,2134,2135],{"class":155,"line":1598},[153,2136,177],{},[153,2138,2139],{"class":155,"line":1604},[153,2140,183],{},[14,2142,2143,2144,1009,2146,2148,2149,2151,2152,1009,2155,2158,2159,2162,2163,2166,2167,2169,2170,1009,2172,2151,2174,1009,2177,2180,2181,2183,2184,2186,2187,2189,2190,2192,2193,2195,2196,2199,2200,1934,2202,2204],{},"启用了命名空间的",[17,2145,432],{},[17,2147,774],{},"会收到局部化的",[17,2150,432],{},"，",[17,2153,2154],{},"dispatch",[17,2156,2157],{},"commit","。换言之，你在使用模块内容",[17,2160,2161],{},"module assets","时不需要在同一模块内额外添加空间名前缀，更改",[17,2164,2165],{},"namespaced","属性后不需要修改模块内的代码。",[51,2168],{},"\n如果你希望使用全局",[17,2171,37],{},[17,2173,432],{},[17,2175,2176],{},"rootState",[17,2178,2179],{},"rootGetters","会作为第三和第四参数传入",[17,2182,432],{},"，也会通过",[17,2185,1150],{},"对象的属性传入",[17,2188,774],{},"。若需要在全局命名空间内分发",[17,2191,774],{},"或提交",[17,2194,756],{},"，将",[17,2197,2198],{},"{ root: true }","作为第三参数传给",[17,2201,2154],{},[17,2203,2157],{},"即可。",[144,2206,2208],{"className":146,"code":2207,"language":148,"meta":149,"style":149},"modules: {\n    foo: {\n        namespaced: true,\n\n        getters: {\n            \u002F\u002F 在这个模块的 getter 中，`getters` 被局部化了\n            \u002F\u002F 你可以使用 getter 的第四个参数来调用 `rootGetters`\n            someGetter(state, getters, rootState, rootGetters) {\n                getters.someOtherGetter \u002F\u002F -> \"foo\u002FsomeOtherGetter\"\n                rootGetters.someOtherGetter \u002F\u002F -> \"someOtherGetter\"\n            },\n            someOtherGetter: state => { \u002F* ... *\u002F }\n        },\n\n        actions: {\n            \u002F\u002F 在这个模块中， dispatch 和 commit 也被局部化了\n            \u002F\u002F 他们可以接受 `root` 属性以访问根 dispatch 或 commit\n            someAction({ dispatch, commit, getters, rootGetters }) {\n                getters.someGetter \u002F\u002F -> \"foo\u002FsomeGetter\"\n                rootGetters.someGetter \u002F\u002F -> \"someGetter\"\n\n                dispatch(\"someOtherAction\") \u002F\u002F -> \"foo\u002FsomeOtherAction\"\n                dispatch(\"someOtherAction\", null, { root: true }) \u002F\u002F -> \"someOtherAction\"\n\n                commit(\"someMutation\") \u002F\u002F -> \"foo\u002FsomeMutation\"\n                commit(\"someMutation\", null, { root: true }) \u002F\u002F -> \"someMutation\"\n            },\n            someOtherAction(ctx, payload) { \u002F* ... *\u002F }\n        }\n    }\n}\n",[17,2209,2210,2215,2220,2225,2229,2234,2239,2244,2249,2254,2259,2263,2268,2272,2276,2281,2286,2291,2296,2301,2306,2310,2315,2320,2324,2329,2334,2338,2343,2347,2351],{"__ignoreMap":149},[153,2211,2212],{"class":155,"line":156},[153,2213,2214],{},"modules: {\n",[153,2216,2217],{"class":155,"line":162},[153,2218,2219],{},"    foo: {\n",[153,2221,2222],{"class":155,"line":168},[153,2223,2224],{},"        namespaced: true,\n",[153,2226,2227],{"class":155,"line":174},[153,2228,275],{"emptyLinePlaceholder":274},[153,2230,2231],{"class":155,"line":180},[153,2232,2233],{},"        getters: {\n",[153,2235,2236],{"class":155,"line":186},[153,2237,2238],{},"            \u002F\u002F 在这个模块的 getter 中，`getters` 被局部化了\n",[153,2240,2241],{"class":155,"line":192},[153,2242,2243],{},"            \u002F\u002F 你可以使用 getter 的第四个参数来调用 `rootGetters`\n",[153,2245,2246],{"class":155,"line":198},[153,2247,2248],{},"            someGetter(state, getters, rootState, rootGetters) {\n",[153,2250,2251],{"class":155,"line":204},[153,2252,2253],{},"                getters.someOtherGetter \u002F\u002F -> \"foo\u002FsomeOtherGetter\"\n",[153,2255,2256],{"class":155,"line":210},[153,2257,2258],{},"                rootGetters.someOtherGetter \u002F\u002F -> \"someOtherGetter\"\n",[153,2260,2261],{"class":155,"line":216},[153,2262,2001],{},[153,2264,2265],{"class":155,"line":222},[153,2266,2267],{},"            someOtherGetter: state => { \u002F* ... *\u002F }\n",[153,2269,2270],{"class":155,"line":228},[153,2271,535],{},[153,2273,2274],{"class":155,"line":234},[153,2275,275],{"emptyLinePlaceholder":274},[153,2277,2278],{"class":155,"line":239},[153,2279,2280],{},"        actions: {\n",[153,2282,2283],{"class":155,"line":336},[153,2284,2285],{},"            \u002F\u002F 在这个模块中， dispatch 和 commit 也被局部化了\n",[153,2287,2288],{"class":155,"line":341},[153,2289,2290],{},"            \u002F\u002F 他们可以接受 `root` 属性以访问根 dispatch 或 commit\n",[153,2292,2293],{"class":155,"line":347},[153,2294,2295],{},"            someAction({ dispatch, commit, getters, rootGetters }) {\n",[153,2297,2298],{"class":155,"line":352},[153,2299,2300],{},"                getters.someGetter \u002F\u002F -> \"foo\u002FsomeGetter\"\n",[153,2302,2303],{"class":155,"line":581},[153,2304,2305],{},"                rootGetters.someGetter \u002F\u002F -> \"someGetter\"\n",[153,2307,2308],{"class":155,"line":586},[153,2309,275],{"emptyLinePlaceholder":274},[153,2311,2312],{"class":155,"line":591},[153,2313,2314],{},"                dispatch(\"someOtherAction\") \u002F\u002F -> \"foo\u002FsomeOtherAction\"\n",[153,2316,2317],{"class":155,"line":596},[153,2318,2319],{},"                dispatch(\"someOtherAction\", null, { root: true }) \u002F\u002F -> \"someOtherAction\"\n",[153,2321,2322],{"class":155,"line":601},[153,2323,275],{"emptyLinePlaceholder":274},[153,2325,2326],{"class":155,"line":607},[153,2327,2328],{},"                commit(\"someMutation\") \u002F\u002F -> \"foo\u002FsomeMutation\"\n",[153,2330,2331],{"class":155,"line":613},[153,2332,2333],{},"                commit(\"someMutation\", null, { root: true }) \u002F\u002F -> \"someMutation\"\n",[153,2335,2336],{"class":155,"line":618},[153,2337,2001],{},[153,2339,2340],{"class":155,"line":624},[153,2341,2342],{},"            someOtherAction(ctx, payload) { \u002F* ... *\u002F }\n",[153,2344,2345],{"class":155,"line":630},[153,2346,225],{},[153,2348,2349],{"class":155,"line":635},[153,2350,177],{},[153,2352,2353],{"class":155,"line":640},[153,2354,355],{},[14,2356,2357,2358,2360,2361,2364,2365,2367,2368,2370],{},"若需要在带命名空间的模块注册全局",[17,2359,774],{},"，你可添加",[17,2362,2363],{},"root: true","，并将这个",[17,2366,774],{},"的定义放在函数",[17,2369,790],{},"中。",[144,2372,2374],{"className":146,"code":2373,"language":148,"meta":149,"style":149},"{\n    actions: {\n        someOtherAction({ dispatch }) {\n            dispatch(\"someAction\")\n        }\n    },\n    modules: {\n        foo: {\n            namespaced: true,\n\n            actions: {\n                someAction: {\n                    root: true,\n                    handler(namespacedContext, payload) { \u002F* ... *\u002F } \u002F\u002F -> \"someAction\"\n                }\n            }\n        }\n    }\n}\n",[17,2375,2376,2381,2385,2390,2395,2399,2403,2407,2412,2416,2420,2424,2429,2434,2439,2443,2447,2451,2455],{"__ignoreMap":149},[153,2377,2378],{"class":155,"line":156},[153,2379,2380],{},"{\n",[153,2382,2383],{"class":155,"line":162},[153,2384,1215],{},[153,2386,2387],{"class":155,"line":168},[153,2388,2389],{},"        someOtherAction({ dispatch }) {\n",[153,2391,2392],{"class":155,"line":174},[153,2393,2394],{},"            dispatch(\"someAction\")\n",[153,2396,2397],{"class":155,"line":180},[153,2398,225],{},[153,2400,2401],{"class":155,"line":186},[153,2402,231],{},[153,2404,2405],{"class":155,"line":192},[153,2406,1733],{},[153,2408,2409],{"class":155,"line":198},[153,2410,2411],{},"        foo: {\n",[153,2413,2414],{"class":155,"line":204},[153,2415,1972],{},[153,2417,2418],{"class":155,"line":210},[153,2419,275],{"emptyLinePlaceholder":274},[153,2421,2422],{"class":155,"line":216},[153,2423,2006],{},[153,2425,2426],{"class":155,"line":222},[153,2427,2428],{},"                someAction: {\n",[153,2430,2431],{"class":155,"line":228},[153,2432,2433],{},"                    root: true,\n",[153,2435,2436],{"class":155,"line":234},[153,2437,2438],{},"                    handler(namespacedContext, payload) { \u002F* ... *\u002F } \u002F\u002F -> \"someAction\"\n",[153,2440,2441],{"class":155,"line":239},[153,2442,2124],{},[153,2444,2445],{"class":155,"line":336},[153,2446,1906],{},[153,2448,2449],{"class":155,"line":341},[153,2450,225],{},[153,2452,2453],{"class":155,"line":347},[153,2454,177],{},[153,2456,2457],{"class":155,"line":352},[153,2458,355],{},[14,2460,2461,2462,1653,2464,1653,2466,1009,2468,2470,2471,2474],{},"当使用",[17,2463,250],{},[17,2465,656],{},[17,2467,1302],{},[17,2469,1039],{},"这些函数来绑定带命名空间的模块时，写起来可能比较繁琐，对于这种情况，你可以将模块的空间名称字符串作为第一个参数传递给上述函数，这样所有绑定都会自动将该模块作为上下文。或者你可以通过使用",[17,2472,2473],{},"createNamespacedHelpers","创建基于某个命名空间辅助函数。它返回一个对象，对象里有新的绑定在给定命名空间值上的组件绑定辅助函数",[144,2476,2478],{"className":146,"code":2477,"language":148,"meta":149,"style":149},"\u002F\u002F ...\ncomputed: {\n        ...mapState({\n            a: state => state.some.nested.module.a,\n            b: state => state.some.nested.module.b\n        })\n    },\n    methods: {\n        ...mapActions([\n            \"some\u002Fnested\u002Fmodule\u002Ffoo\", \u002F\u002F -> this[\"some\u002Fnested\u002Fmodule\u002Ffoo\"]()\n            \"some\u002Fnested\u002Fmodule\u002Fbar\" \u002F\u002F -> this[\"some\u002Fnested\u002Fmodule\u002Fbar\"]()\n        ])\n    }\n\u002F\u002F ...\n\n\u002F\u002F ...\ncomputed: {\n        ...mapState(\"some\u002Fnested\u002Fmodule\", {\n            a: state => state.a,\n            b: state => state.b\n        })\n    },\n    methods: {\n        ...mapActions(\"some\u002Fnested\u002Fmodule\", [\n            \"foo\", \u002F\u002F -> this.foo()\n            \"bar\" \u002F\u002F -> this.bar()\n        ])\n    }\n\u002F\u002F ...\n\n\u002F\u002F ...\nimport { createNamespacedHelpers } from \"vuex\"\nconst { mapState, mapActions } = createNamespacedHelpers(\"some\u002Fnested\u002Fmodule\")\nexport default {\n    computed: {\n        \u002F\u002F 在 `some\u002Fnested\u002Fmodule` 中查找\n        ...mapState({\n            a: state => state.a,\n            b: state => state.b\n        })\n    },\n    methods: {\n        \u002F\u002F 在 `some\u002Fnested\u002Fmodule` 中查找\n        ...mapActions([\n            \"foo\",\n            \"bar\"\n        ])\n    }\n}\n\u002F\u002F ...\n",[17,2479,2480,2484,2489,2493,2498,2503,2507,2511,2515,2519,2527,2535,2540,2544,2548,2552,2556,2560,2565,2570,2575,2579,2583,2587,2592,2600,2608,2612,2616,2620,2624,2628,2633,2638,2642,2646,2651,2655,2659,2663,2667,2671,2675,2679,2683,2689,2695,2700,2705,2710],{"__ignoreMap":149},[153,2481,2482],{"class":155,"line":156},[153,2483,1423],{},[153,2485,2486],{"class":155,"line":162},[153,2487,2488],{},"computed: {\n",[153,2490,2491],{"class":155,"line":168},[153,2492,402],{},[153,2494,2495],{"class":155,"line":174},[153,2496,2497],{},"            a: state => state.some.nested.module.a,\n",[153,2499,2500],{"class":155,"line":180},[153,2501,2502],{},"            b: state => state.some.nested.module.b\n",[153,2504,2505],{"class":155,"line":186},[153,2506,412],{},[153,2508,2509],{"class":155,"line":192},[153,2510,231],{},[153,2512,2513],{"class":155,"line":198},[153,2514,1074],{},[153,2516,2517],{"class":155,"line":204},[153,2518,1338],{},[153,2520,2521,2524],{"class":155,"line":210},[153,2522,2523],{},"            \"some\u002Fnested\u002Fmodule\u002Ffoo\",",[153,2525,2526],{}," \u002F\u002F -> this[\"some\u002Fnested\u002Fmodule\u002Ffoo\"]()\n",[153,2528,2529,2532],{"class":155,"line":216},[153,2530,2531],{},"            \"some\u002Fnested\u002Fmodule\u002Fbar\"",[153,2533,2534],{}," \u002F\u002F -> this[\"some\u002Fnested\u002Fmodule\u002Fbar\"]()\n",[153,2536,2537],{"class":155,"line":222},[153,2538,2539],{},"        ])\n",[153,2541,2542],{"class":155,"line":228},[153,2543,177],{},[153,2545,2546],{"class":155,"line":234},[153,2547,1423],{},[153,2549,2550],{"class":155,"line":239},[153,2551,275],{"emptyLinePlaceholder":274},[153,2553,2554],{"class":155,"line":336},[153,2555,1423],{},[153,2557,2558],{"class":155,"line":341},[153,2559,2488],{},[153,2561,2562],{"class":155,"line":347},[153,2563,2564],{},"        ...mapState(\"some\u002Fnested\u002Fmodule\", {\n",[153,2566,2567],{"class":155,"line":352},[153,2568,2569],{},"            a: state => state.a,\n",[153,2571,2572],{"class":155,"line":581},[153,2573,2574],{},"            b: state => state.b\n",[153,2576,2577],{"class":155,"line":586},[153,2578,412],{},[153,2580,2581],{"class":155,"line":591},[153,2582,231],{},[153,2584,2585],{"class":155,"line":596},[153,2586,1074],{},[153,2588,2589],{"class":155,"line":601},[153,2590,2591],{},"        ...mapActions(\"some\u002Fnested\u002Fmodule\", [\n",[153,2593,2594,2597],{"class":155,"line":607},[153,2595,2596],{},"            \"foo\",",[153,2598,2599],{}," \u002F\u002F -> this.foo()\n",[153,2601,2602,2605],{"class":155,"line":613},[153,2603,2604],{},"            \"bar\"",[153,2606,2607],{}," \u002F\u002F -> this.bar()\n",[153,2609,2610],{"class":155,"line":618},[153,2611,2539],{},[153,2613,2614],{"class":155,"line":624},[153,2615,177],{},[153,2617,2618],{"class":155,"line":630},[153,2619,1423],{},[153,2621,2622],{"class":155,"line":635},[153,2623,275],{"emptyLinePlaceholder":274},[153,2625,2626],{"class":155,"line":640},[153,2627,1423],{},[153,2629,2630],{"class":155,"line":645},[153,2631,2632],{},"import { createNamespacedHelpers } from \"vuex\"\n",[153,2634,2635],{"class":155,"line":1564},[153,2636,2637],{},"const { mapState, mapActions } = createNamespacedHelpers(\"some\u002Fnested\u002Fmodule\")\n",[153,2639,2640],{"class":155,"line":1570},[153,2641,280],{},[153,2643,2644],{"class":155,"line":1576},[153,2645,207],{},[153,2647,2648],{"class":155,"line":1581},[153,2649,2650],{},"        \u002F\u002F 在 `some\u002Fnested\u002Fmodule` 中查找\n",[153,2652,2653],{"class":155,"line":1587},[153,2654,402],{},[153,2656,2657],{"class":155,"line":1593},[153,2658,2569],{},[153,2660,2661],{"class":155,"line":1598},[153,2662,2574],{},[153,2664,2665],{"class":155,"line":1604},[153,2666,412],{},[153,2668,2669],{"class":155,"line":1610},[153,2670,231],{},[153,2672,2673],{"class":155,"line":1616},[153,2674,1074],{},[153,2676,2677],{"class":155,"line":1621},[153,2678,2650],{},[153,2680,2681],{"class":155,"line":1626},[153,2682,1338],{},[153,2684,2686],{"class":155,"line":2685},45,[153,2687,2688],{},"            \"foo\",\n",[153,2690,2692],{"class":155,"line":2691},46,[153,2693,2694],{},"            \"bar\"\n",[153,2696,2698],{"class":155,"line":2697},47,[153,2699,2539],{},[153,2701,2703],{"class":155,"line":2702},48,[153,2704,177],{},[153,2706,2708],{"class":155,"line":2707},49,[153,2709,355],{},[153,2711,2713],{"class":155,"line":2712},50,[153,2714,1423],{},[40,2716,2717],{"id":2717},"模块动态注册",[14,2719,2720,2721,2723,2724,2727,2728,1009,2731,2734,2735,2737,2738,2740,2741,2743,2744,2747,2748,1009,2751,2754,2755,2758,2759,2761,2762,2765,2766,38],{},"在",[17,2722,30],{},"创建之后，你可以使用",[17,2725,2726],{},"store.registerModule","方法注册模块，之后就可以通过",[17,2729,2730],{},"store.state.myModule",[17,2732,2733],{},"store.state.nested.myModule","访问模块的状态。模块动态注册功能使得其他",[17,2736,479],{},"插件可以通过在",[17,2739,30],{},"中附加新模块的方式来使用",[17,2742,19],{},"管理状态。例如",[17,2745,2746],{},"vuex-router-sync","插件就是通过动态注册模块将",[17,2749,2750],{},"vue-router",[17,2752,2753],{},"vuex","结合在一起，实现应用的路由状态管理。你也可以使用",[17,2756,2757],{},"store.unregisterModule(moduleName)","来动态卸载模块，注意你不能使用此方法卸载静态模块，即创建",[17,2760,30],{},"时声明的模块。此外你可以通过",[17,2763,2764],{},"store.hasModule(moduleName)","方法检查该模块是否已经被注册到",[17,2767,30],{},[144,2769,2771],{"className":146,"code":2770,"language":148,"meta":149,"style":149},"import Vuex from \"vuex\";\n\nconst store = new Vuex.Store({ \u002F* 选项 *\u002F })\n\n\u002F\u002F 注册模块 `myModule`\nstore.registerModule(\"myModule\", {\n  \u002F\u002F ...\n})\n\u002F\u002F 注册嵌套模块 `nested\u002FmyModule`\nstore.registerModule([\"nested\", \"myModule\"], {\n  \u002F\u002F ...\n})\n",[17,2772,2773,2778,2782,2787,2791,2796,2801,2805,2809,2814,2819,2823],{"__ignoreMap":149},[153,2774,2775],{"class":155,"line":156},[153,2776,2777],{},"import Vuex from \"vuex\";\n",[153,2779,2780],{"class":155,"line":162},[153,2781,275],{"emptyLinePlaceholder":274},[153,2783,2784],{"class":155,"line":168},[153,2785,2786],{},"const store = new Vuex.Store({ \u002F* 选项 *\u002F })\n",[153,2788,2789],{"class":155,"line":174},[153,2790,275],{"emptyLinePlaceholder":274},[153,2792,2793],{"class":155,"line":180},[153,2794,2795],{},"\u002F\u002F 注册模块 `myModule`\n",[153,2797,2798],{"class":155,"line":186},[153,2799,2800],{},"store.registerModule(\"myModule\", {\n",[153,2802,2803],{"class":155,"line":192},[153,2804,1497],{},[153,2806,2807],{"class":155,"line":198},[153,2808,183],{},[153,2810,2811],{"class":155,"line":204},[153,2812,2813],{},"\u002F\u002F 注册嵌套模块 `nested\u002FmyModule`\n",[153,2815,2816],{"class":155,"line":210},[153,2817,2818],{},"store.registerModule([\"nested\", \"myModule\"], {\n",[153,2820,2821],{"class":155,"line":216},[153,2822,1497],{},[153,2824,2825],{"class":155,"line":222},[153,2826,183],{},[40,2828,2829],{"id":2829},"每日一题",[144,2831,2836],{"className":2832,"code":2834,"language":2835},[2833],"language-text","https:\u002F\u002Fgithub.com\u002FWindrunnerMax\u002FEveryDay\n","text",[17,2837,2834],{"__ignoreMap":149},[40,2839,2840],{"id":2840},"参考",[144,2842,2845],{"className":2843,"code":2844,"language":2835},[2833],"https:\u002F\u002Fvuex.vuejs.org\u002Fzh\u002F\nhttps:\u002F\u002Fwww.jianshu.com\u002Fp\u002F1fdf9518cbdf\nhttps:\u002F\u002Fwww.jianshu.com\u002Fp\u002F29467543f77a\nhttps:\u002F\u002Fjuejin.cn\u002Fpost\u002F6844903624137523213\nhttps:\u002F\u002Fsegmentfault.com\u002Fa\u002F1190000024371223\nhttps:\u002F\u002Fgithub.com\u002FHibop\u002FHibop.github.io\u002Fissues\u002F45\n",[17,2846,2844],{"__ignoreMap":149},[2848,2849,2850],"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":149,"searchDepth":162,"depth":162,"links":2852},[2853,2854,2858,2862,2868,2874,2879,2880,2881],{"id":42,"depth":162,"text":42},{"id":37,"depth":162,"text":97,"children":2855},[2856,2857],{"id":128,"depth":168,"text":129},{"id":244,"depth":168,"text":245},{"id":432,"depth":162,"text":433,"children":2859},[2860,2861],{"id":462,"depth":168,"text":462},{"id":650,"depth":168,"text":651},{"id":756,"depth":162,"text":757,"children":2863},[2864,2865,2866,2867],{"id":777,"depth":168,"text":777},{"id":919,"depth":168,"text":920},{"id":960,"depth":168,"text":961},{"id":1026,"depth":168,"text":1027},{"id":774,"depth":162,"text":1012,"children":2869},[2870,2871,2872,2873],{"id":1139,"depth":168,"text":1139},{"id":1240,"depth":168,"text":1240},{"id":1295,"depth":168,"text":1296},{"id":1379,"depth":168,"text":1380},{"id":1631,"depth":162,"text":1632,"children":2875},[2876,2877,2878],{"id":1647,"depth":168,"text":1647},{"id":1768,"depth":168,"text":1768},{"id":1921,"depth":168,"text":1921},{"id":2717,"depth":162,"text":2717},{"id":2829,"depth":162,"text":2829},{"id":2840,"depth":162,"text":2840},"Vuex是一个专为Vue.js应用程序开发的状态管理模式，其采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。每一个Vuex应用的核心就是store仓库，store基本上就是一个容器，它包含着你的应用中大部分的状态state。","md",{},"\u002Fvue\u002Fvuex中的核心方法",{"title":5,"description":2882},"Vue\u002FVuex中的核心方法","aTxSOcPaHdOhtIEHhSrNHFBWAd0x3swlI29Spy09ViU",1791042468863]