鑳屾櫙浠嬬粛锛歷uexstore楂樼骇鐗堥€傜敤浜庡ぇ鍨嬪鏉傜殑鍗曢〉搴旂敤銆傜敤閫旓細鏁版嵁绠＄悊鐘舵€佺被浼间簬鏁版嵁瀛樺偍鍏ㄥ眬鐘舵€佸€笺€傚綋鍊兼敼鍙樻椂锛屼細瑙﹀彂dom鏇存柊銆備娇鐢ㄦ椂锛屼細鎸傝浇鍦ㄥ瓙缁勪欢鐨勮绠楀睘鎬т笂锛堣繖鏍峰仛鐨勭洰鐨勬槸涓轰簡瀹炴椂鏇存柊锛変綔涓篤ue鍝嶅簲寮忕郴缁熻闂睘鎬ф椂涓嶄細缂撳瓨缁撴灉鐨勪竴閮ㄥ垎鏄紦瀛樼殑mapGetters鈥斺€旇緟鍔╁嚱鏁板皢store涓殑getter鏄犲皠鍒版湰鍦拌绠楀睘鎬э紝鍗冲畾涔塯etter鍚庯紝娉ㄥ叆涓€鑸瑅uex涓殑getter锛屼粠鑰屽叏灞€浣跨敤mutation鏉ユ敼鍙榮tore涓殑state鍊硷紝鍖呮嫭涓€涓簨浠剁被鍨嬪拰涓€涓洖璋冨嚱鏁帮紝涓嶆敮鎸佸紓姝utation:{increment(state,n){state.count+=n}}store.commit('increment',10)//灏嗗弬鏁癿utations浣滀负瀵硅薄浼犻€掞細{increment(state,payload){state.count+=payload.amount}}//amount鐩稿綋浜庝紶鍏ュ弬鏁皊tore銆俢ommit('increment',{amount:10})鍔ㄤ綔绫讳技浜巑utations鍜宻upport寮傛鍔ㄤ綔瑙﹀彂store.dispatch:{incrementAsync({commit}){setTimeout(()=>{commit('increment')},1000)}}//涓ょ褰㈠紡鐨勫垎鍙戣皟鐢╯tore.dispatch('incrementAsync',{amount:10})store.dispatch({type:'incrementAsync',amount:10})mapActions浣跨敤this.$store.dispatch('xxx')鍦ㄧ粍浠朵腑鍒嗗彂鍔ㄤ綔锛屾垨鑰呬娇鐢╩apActions杈呭姪鍑芥暟鏉ュ皢缁勪欢鏂规硶鏄犲皠鍒皊tore.dispatch璋冪敤锛堥渶瑕佸湪鏍笷estival涓璸ointinjectionstore)import{mapActions}from'vuex'exportdefault{//...鏂规硶锛歿...mapActions(['increment',//灏哷this.increment()`鏄犲皠鍒癭this.$store銆俤ispatch('increment')`//`mapActions`涔熸敮鎸佽礋杞斤細'incrementBy'//灏哷this.incrementBy(amount)`鏄犲皠鍒癭this.$store.dispatch('incrementBy',amount)`]),...mapActions({add:'increment'//灏哷this.add()`鏄犲皠鍒癭this.$store.dispatch('increment')`})}}actionsasync馃尠actions:{actionA({commit}){returnnewPromise((resolve,reject)=>{setTimeout(()=>{commit('someMutation')resolve()},1000)})}}//姝ｅ父璋冪敤褰㈠紡store.dispatch('actionA').then(()=>{//...})//鍦ㄥ叾浠栧姩浣滀腑璋冪敤鍔ㄤ綔锛歿//...actionB({dispatch,commit}){returndispatch('actionA').then(()=>{commit('someOtherMutation')})}}//asyncawaitactions:{asyncactionA({commit}){commit('gotData',awaitgetData())},asyncactionB({dispatch,commit}){awaitdispatch('actionA')//绛夊緟actionA瀹屾垚commit('gotOtherData',awaitgetOtherData())}}//鍋囪getData()鍜実etOtherData()杩斿洖Promisemodules鍑芥暟锛氬皢store鎷嗗垎涓簃odules锛屾瘡涓ā鍧楅兘鏈夎嚜宸辩殑鐘舵€侊紝绐佸彉锛屽姩浣滐紝getterconstmoduleA={state:()=>({...}),mutations:{...},actions:{...},getters:{...}}constmoduleB={state:()=>({...}),mutations:{...},actions:{...}}conststore=newVuex.Store({modules:{a:moduleA,b:moduleB}})store.state.a//->moduleA鐨勭姸鎬乻tore.state.b//->moduleB鐨勭姸鎬乧onstmoduleA={state:()=>({count:0}),mutations:{increment(state){//杩欓噷鐨刞state`瀵硅薄鏄ā鍧楃殑鏈湴鐘舵€乻tate.count++}},getters:{doubleCount(state){returnstate.count*2}}}constmoduleA={state:()=>({count:0}),mutations:{increment(state){//杩欓噷鐨刞state`瀵硅薄鏄ā鍧楃殑灞€閮ㄧ姸鎬乻tate.count++}},getters:{鍙岃鏁帮紙鐘舵€侊級{returnstate.count*2}},鍔ㄤ綔锛歿incrementIfOddOnRootSum({state,commit,rootState}){if((state.count+rootState.count)%2===1){commit('increment')}}},getters:{sumWithRootCount(state,getters,rootState){returnstate.count+rootState.count}},}杩樻湁妯″潡鍛藉悕妯″潡缁ф壙鍜屾洿澶嶆潅鐨勪娇鐢ㄧ粏鑺傦細https://vuex.vuejs.org/zh/gui...鎬荤粨1.搴旂敤灞傜殑鐘舵€佸簲璇ラ泦涓埌涓€涓崟鐙殑瀛樺偍瀵硅薄涓?.鎻愪氦绐佸彉鏄敼鍙樼姸鎬佺殑鍞竴閫斿緞锛岃€屼笖杩欎釜杩囩▼鏄悓姝ョ殑銆?銆佸紓姝ラ€昏緫瑕佸皝瑁呭湪action涓€傚鏋渟tore鏂囦欢澶ぇ锛宎ction銆乵utation銆乬etter闇€瑕佹媶鍒嗘垚鍗曠嫭鐨勬枃浠垛攢components鈹傗敎鈹€鈹€App.vue鈹傗敂鈹€鈹€...鈹斺攢鈹€store鈹溾攢鈹€index.js#wherewe缁勮妯″潡鍜屽鍑哄晢搴椻敎鈹€鈹€actions.js#rootlevelactions鈹溾攢鈹€mutations.js#rootlevelmutation鈹斺攢鈹€modules鈹溾攢鈹€cart.js#shoppingcartmodule鈹斺攢鈹€products.js#productmodule
