鐜颁唬娴忚鍣ㄧ殑鍔熻兘瓒婃潵瓒婂己澶э紝鍓嶇闇€瑕佸鐞嗙殑涓氬姟閫昏緫涔熻秺鏉ヨ秺澶嶆潅銆傛彁渚涜壇濂界殑浜や簰鏄垜浠竴鐩磋拷姹傜殑锛屾垜浠篃鍦ㄥ仛鍙鍖栨姤琛ㄥ伐鍏锋湁涓€涓噸瑕佺殑鍔熻兘锛屾彁鍗囩敤鎴蜂綋楠岋紝undo&redo锛岃繖涓姛鑳界粰鐢ㄦ埛瀹夊叏鎰熷拰淇濇姢鎰燂紝鐢ㄦ埛涓嶄細鎷呭績鎿嶄綔浠栦滑鎵€鍋氱殑浜掑姩灏嗘秷澶憋紝鏃犳硶杩芥函銆備负浜嗗疄鐜拌繖涓姛鑳斤紝鎴戠爺绌朵簡涓€浜涘疄鐜版柟寮忥紝鏈夌殑鍩轰簬Immutable鏁版嵁缁撴瀯锛屾湁鐨勫熀浜庢爤鏁版嵁缁撴瀯鏉ョ鐞嗐€傛垜浠殑瀹為檯椤圭洰浣跨敤Vuex浣滀负鍏ㄥ眬鐘舵€佺鐞嗗伐鍏枫€傜湡姝ｉ€傚悎鎴戜滑瀹為檯椤圭洰鐨勫叾瀹炴槸鍩轰簬Vuex鐨剆tore瀹炰緥API鐨勫疄鐜般€傞€氳繃Vuex瀛樺偍鐨勬墍鏈夌姸鎬佸湪鍔ㄤ綔/绐佸彉琚Е鍙戞椂瀛樺偍涓哄巻鍙茶褰曪紝鎴戜滑鍙互鍦ㄩ渶瑕佷娇鐢ㄦ椂闅忔剰鈥滅┛姊€濄€?閴翠簬姝わ紝鎴戠粨鍚坰tateshot寮€鍙戜簡涓€娆惧彲浠モ€滅┛瓒娾€濈殑Vuex鎻掍欢銆傛湰鏂囧皢浠嬬粛涓€涓熀浜嶸uexAPI鐨勨€滄椂闂存梾琛屸€濇彃浠躲€備互鍔ㄦ€佺綉鏍煎竷灞€涓轰緥锛屼娇鐢╯tateshot.js瀹炵幇鐨剈ndo&redo鍔熻兘锛屽ぇ鑷存晥鏋滃涓嬶細TimeTravelWhyTimeGem锛屼竴涓己澶х殑鏃堕棿瀹濈煶锛屽叿鏈夋搷绾垫椂闂寸殑鑳藉姏銆傚綋鎴戝悗鎮旀椂锛岃繖瀵逛汉绫绘潵璇存槸涓€绉嶇濂囩殑鎰熻銆傚綋鎴戝仛浜嗕竴浠朵簨鎯呭悗鎮旂殑鏃跺€欙紝鎴戞兂鎴戜笉鍋氫細鏇村ソ锛屾垜鎯冲洖鍒版渶鍒濄€傛€庝箞鏍凤紝閭ｆ垜浠渶瑕佷竴涓叿鏈夊己澶х殑鏃堕棿绌挎鍔熻兘鐨勨€滄椂闂村疂鐭斥€濓紝鎴戜滑鏉ュ垱寤哄畠鏉ュ疄鐜扳€滄椂闂村疂鐭斥€漹uex-stateshot鐨勫疄鐜颁娇鐢ㄤ簡Vuex鐨勪竴浜汚PI锛宻tateshot.js鐢ㄤ簬璁板綍鍘嗗彶鐘舵€侊紝骞舵墽琛屾挙娑堝拰閲嶅仛銆傚綋鎴戜滑瑙﹀彂涓€涓猘ctions/mutations鏃讹紝鎴戜滑鍙互閫氳繃璁㈤槄鏉ヨЕ鍙戜竴涓猻napshot鏉ヨ褰曞巻鍙茬姸鎬乻napshot锛屾柟渚挎垜浠瑄ndo&redo銆備笅闈㈡垜浠潵璁よ瘑涓€涓嬭繖浜汚PI锛宻ubscribe銆乻ubscribeAction銆乺egisterModule銆乧reateNamespacedHelpersVuexAPIVuex.Store瀹炰緥鏂规硶鍜岃緟鍔╁嚱鏁版彁渚涗簡涓€浜涘钩鏃跺彲鑳界敤涓嶅埌鐨凙PI锛岃€岃繖浜汚PI瀵逛簬寮€鍙慥uex鎻掍欢闈炲父鏈夌敤銆俿tore.subscribe璁㈤槄store鐨勫彉鍖栥€俬andler浼氬湪姣忔鍙樺紓瀹屾垚鍚庤璋冪敤锛屾帴鏀跺彉寮傚拰鍙樺紓鍚庣殑鐘舵€佷綔涓哄弬鏁帮細store.subscribe((mutation,state)=>{console.log(mutation.type)console.log(mutation.payload)})store.subscribeAction浠?.1.0寮€濮嬶紝subscribeAction鎻愪緵浜嗗紑鍙慥uex鎻掍欢鐨勯€氱敤鐢ㄦ硶銆傛偍鍙互鎸囧畾璁㈤槄澶勭悊鍑芥暟鏄湪鍒嗗彂action涔嬪墠锛坆efore锛夎繕鏄箣鍚庯紙after锛夎皟鐢紙榛樿琛屼负鏄痓efore锛夛細store.subscribeAction({before:(action,state)=>{console.log(`beforeaction${action.type}`)},after:(action,state)=>{console.log(`afteraction${action.type}`)}})store.registerModule鍒涘缓store涔嬪悗锛屾偍鍙互浣跨敤store.registerModule鏂规硶娉ㄥ唽妯″潡锛?/registermodule`myModule`store.registerModule('myModule',{//...})//娉ㄥ唽宓屽妯″潡`nested/myModule`store銆俽egisterModule(['nested','myModule'],{//...})妯″潡鍔ㄦ€佹敞鍐屽姛鑳藉厑璁稿叾浠朧ue鎻掍欢娣诲姞鏂扮殑鍒皊tore鐨勬ā鍧楁柟寮忥紝鐢╒uex绠＄悊鐘舵€併€俢reateNamespacedHelpers浣跨敤createNamespacedHelpers鍒涘缓鍩轰簬鐗瑰畾鍛藉悕绌洪棿鐨勮緟鍔╁嚱鏁般€傚畠杩斿洖涓€涓甫鏈夌粦瀹氬埌缁欏畾鍛藉悕绌洪棿鍊肩殑鏂扮粍浠剁粦瀹氬姪鎵嬬殑瀵硅薄锛氬湪`some/nested/module`...mapState({a:state=>state.a,b:state=>state.b})},methods:{//鍦╜some/nested/module`涓煡鎵俱€?.mapActions(['foo','bar'])}}浣跨敤vuex-stateshot鎻掍欢鏄潪渚靛叆寮忓拰鍙彃鎷旂殑锛屾彃浠朵娇鐢╮egisterModuleAPI鍔ㄦ€佸垱寤轰簡涓€涓悕涓簐uexstateshot鐨勫懡鍚嶇┖闂存潵瀛樺偍涓€浜涢渶瑕佺殑鐘舵€佸拰鏂规硶鏃堕棿鏃呰銆傚畨瑁呭彲浠ラ€氳繃浠ヤ笅鍛戒护瀹夎锛歯pmivuex-stateshot-Soryarnaddvuex-stateshot-S鍒涘缓鎻掍欢鍒涘缓鎻掍欢锛坈reatePlugin锛夋椂锛屽彲浠ユ寚瀹氬摢浜涙ā鍧楋紙__MODULE__NAME__锛夊拰鍝簺鍔ㄤ綔/module涓嬬殑mutations闇€瑕佽闃咃紝鍙互鍦╯tateshot鐨凥istoryOptionsAPI涓璒ptional浼犱釜鏍楀瓙馃尠import{createPlugin}from'vuex-stateshot'constsubscribes={//鐗规畩鏍规ā鍧梜eyrootModule:{//Theactionsyouwantsnapshotactions:[],//Themutationsyouwantsnapshotmutations:[]},//鑷畾涔夋ā鍧楀悕绉癬_MODULE__NAME__:{//Theactionsyouwantsnapshotactions:[],//Themutationsyouwantsnapshotmutations:[]}}constoptions={maxLength:20}conststore=newVuex.Store({state:{},...,plugins:[createPlugin(subscribes,options)]})鍦ㄧ粍浠跺唴閮ㄤ娇鐢ㄣ€傚彲浠ラ€氳繃createNamespacedHelpersAPISpacevuexstateshot鎸囧畾鎻掍欢鐨勫悕绉版潵鏄犲皠缁勪欢缁戝畾杈呭姪鍑芥暟{...mapGetters(['undoCount','redoCount','hasUndo','hasRedo'])},methods:{...mapActions(['undo','redo','reset'])}}Undo/Redo鏂规硶閫氳繃缁勪欢缁戝畾Auxiliary鍑芥暟mapActions锛屾垜浠彲浠ュ緱鍒皍ndo/redo鏂规硶锛岃繖涓柟娉曟槸鐢ㄦ潵绠＄悊鐘舵€佺殑鏂规硶鍚嶇О鎻忚堪鍥炶皟undo濡傛灉鏈夊彲鎾ら攢鐨勫巻鍙茶褰曪紝鍙互寰楀埌涓婁竴鏉¤褰曠殑鐘舵€?)=>prevStateredo鎵цundo鍚庯紝鍙互閫氳繃Redogetsthelastundoedhistory()=>nextStatereset鏉ユ竻闄istory-鍘嗗彶鐘舵€侀€氳繃缁勪欢缁戝畾杈呭姪鍑芥暟mapGetters锛屾垜浠彲浠ヨ幏鍙杊asUndo銆乭asRedo銆乽ndoCount銆乺edoCount绛夌姸鎬佽繘琛岄€昏緫澶勭悊銆傚綋瑙﹀彂鐘舵€佸悓姝ユ椂锛寀ndoCount=1/hasUndo=true;杩欐槸浣跨敤鎻掍欢鐨勫紑濮嬶紱褰撲綘璋冪敤涓€娆ndo鏃讹紝浼氭湁涓€涓噸鍋氳褰曠姸鎬佹弿杩扮被鍨嬪垵濮嬪€紆ndoCount鍙互閲嶅仛鍘嗗彶璁板綍璁℃暟銆侼umber0redoCount閲嶅仛鍘嗗彶璁板綍鎶€鏈疦umber0hasUndoundoBooleanfalsehasRedo鍙互redoBooleanfalse浠绘剰闂紵褰撻渶姹傚緢澶嶆潅鐨勬椂鍊欙紝涔熻鎴戞兂瑕佹挙閿€鐨勪笉鏄竴涓猘ction/mutations锛岃€屾槸鍑犱釜action/mutations銆傞拡瀵硅繖涓渶姹傦紝vuexstateshot鎻愪緵浜嗚嚜瀹氫箟瀹氭椂鍚屾鍘嗗彶璁板綍鐨勬柟娉曪紝璁╁涓鏉傛搷浣溾€滀竴閿繕鍘熲€濄€傛柟娉曞悕绉版弿杩癱allbacksyncState鑷畾涔夊悓姝ュ巻鍙插揩鐓х殑鏂规硶-unsubscribeAction鍋滄璁㈤槄Actions-subscribeAction閲嶆柊璁㈤槄Actions锛岄€氬父涓巙nsubscribeAction涓€璧蜂娇鐢?unsubscribe鍋滄璁㈤槄Mutations-subscribe閲嶆柊璁㈤槄Mutations锛岄€氬父涓巙nsubscribe-a鍦烘櫙涓€璧蜂娇鐢ㄥ亣璁炬垜浠闃呭埌changeTheme銆乧hangeColor鍜宑hangeLang鏄笁涓狝ction銆傚綋瑙﹀彂姣忎釜Action鏃讹紝灏嗚褰曞巻鍙插揩鐓с€備絾瀹為檯鍦烘櫙鐨勯渶姹傛槸锛岃繖浜涚姸鎬佸叏閮ㄦ敼鍙樺悗锛岄渶瑕佸悓姝ュ巻鍙插揩鐓э紝浠ヤ究鍦╱ndoing鏃舵仮澶嶅涓姸鎬併€俰mport{mapActions}from'vuex'exportdefault{name:'xxx',...methods:{...mapActions(['changeTheme','changeColor','changeLang']),handleChange(){//鍋滄璁㈤槄鎿嶄綔this.$stateshot.unsubscribeAction()//澶氭瑙﹀彂璁㈤槄鎿嶄綔this.changeTheme('dark')this.changeColor('#fa4')this.changeTheme('zh')//閲嶆柊璁㈤槄鎿嶄綔this.$stateshot.subscribeAction()//鍚屾鍘嗗彶蹇収this.$stateshot.syncState()}}}Tips:vuex-stateshot涔熸彁渚涗簡鍋滄璁㈤槄Actions/Mutations鐨勬柟娉昈nlineDemo缁撹鍦ㄥ彲瑙嗗寲宸ュ叿椤圭洰涓紝鎴戜滑宸茬粡浣跨敤vuex-stateshot绠＄悊鍘嗗彶鐘舵€併€傛€ц兘涓嶉敊锛屽畬缇庢弧瓒充簡鈥滅┛瓒娾€濈殑闇€姹傘€備负鐢ㄦ埛鍦ㄦ搷浣滃拰浜や簰涓彁渚涘畨鍏ㄤ繚闅溿€傛劅璋doodlewind鎻愪緵浜嗕竴涓紭绉€鐨勫伐鍏穝tateshot鍜孷uex3.1.0+鎻愪緵鐨剆ubscribeActionAPI锛屼娇寰楁搷浣滄湁搴忓彲闈犮€倂uex-stateshot鎻掍欢鐗规€р湪锛氶潪渚靛叆寮忋€佸彲鎻掓嫈鐨勬彃浠惰皟鐢ㄩ€昏緫涓ヨ皑涓氬姟鐘舵€佺ǔ瀹氱殑undo&redo鏂规硶闅忔椂鍚屾蹇収鐨勬柟娉?00%娴嬭瘯鍦烘櫙瑕嗙洊璧勬簮stateshotVuexAPI鍙傝€冩枃鏈細http://xlbd.me/鍒涘缓鏃堕棿-鈥?/p>
