Vue.js3.0從入門到實踐教學(xué)設(shè)計課程名稱：Vue.js3.0從入門到實踐授課年級：授課學(xué)期：教師姓名：年月日課程名稱第12章 Vuex狀態(tài)管理計劃學(xué)時4內(nèi)容分析伴隨大型單頁應(yīng)用中頁面復(fù)雜度的提升，頁面中的視圖組件及狀態(tài)（數(shù)據(jù)）的數(shù)量也在不斷增長，因此激發(fā)了快速管理應(yīng)用程序狀態(tài)的需求，越來越多的開發(fā)者開始使用Vuex管理數(shù)據(jù)。Vuex是一個專門為Vue應(yīng)用程序設(shè)計的狀態(tài)管理庫，它提供了一種集中式存儲管理方式，使得組件之間的共享數(shù)據(jù)變得更加簡單和可控。本章將帶領(lǐng)讀者認識和學(xué)習(xí)Vuex的安裝方法、核心概念及其應(yīng)用，幫助讀者能夠在Vue應(yīng)用程序中使用Vuex進行狀態(tài)管理。教學(xué)目標與教學(xué)要求【知識目標】理解Vuex狀態(tài)管理及其原理掌握Vuex的安裝與配置理解Vuex的核心概念掌握Vuex與組合式API的結(jié)合使用【技能目標】能夠安裝與配置Vuex能夠正確使用Vuex與組合式API【育人目標】培養(yǎng)學(xué)員對項目的責任感，確保代碼的質(zhì)量和穩(wěn)定性。強調(diào)軟件開發(fā)的職業(yè)道德，如保護用戶隱私、遵守開源協(xié)議等。教學(xué)重點單組件與多組件的狀態(tài)管理Vuex的原理Vuex的安裝與配置StateGettersMutationsActionsModulesVuex與組合式API實訓(xùn)：糧食信息列表頁面教學(xué)難點實訓(xùn)：糧食信息列表頁面教學(xué)方式課堂講解配合PPT演示教學(xué)過程第一課時（Vuex的簡述、單組件與多組件的狀態(tài)管理、Vuex的原理、Vuex的安裝與配置）回顧內(nèi)容回顧上節(jié)內(nèi)容，引出本節(jié)內(nèi)容回顧上節(jié)的內(nèi)容，并提問學(xué)生上節(jié)練習(xí)中的問題，學(xué)生回答完后，由上節(jié)內(nèi)容引出本節(jié)要講的Vuex的簡述、單組件與多組件的狀態(tài)管理、Vuex的原理、Vuex的安裝與配置等內(nèi)容。明確學(xué)習(xí)目標理解Vuex狀態(tài)管理及其原理掌握Vuex的安裝與配置知識講解知識點1-Vuex的簡述Vuex的特點Vuex有以下3個特點。集中式存儲：Vuex將將全局狀態(tài)單獨存儲在“store”中，使得狀態(tài)變化全局可控且易于調(diào)試。組件之間的共享狀態(tài)：Vuex允許組件之間共享狀態(tài)，而不必通過props和和emit()方法分發(fā)事件來傳遞數(shù)據(jù)?？刹灏危篤uex的可插拔性指的是它可以與其他庫或插件集成，如VueRouter、VueDevTools等。讀者可以根據(jù)自己的需求選擇合適的插件來增強應(yīng)用程序的功能。Vuex的應(yīng)用場景Vuex有以下3個應(yīng)用場景。大型單頁應(yīng)用程序：對于需要共享狀態(tài)的大型單頁應(yīng)用程序，Vuex可以幫助開發(fā)人員更好地組織和管理狀態(tài)。多個組件需要共享狀態(tài)：如果多個組件需要訪問相同的狀態(tài)數(shù)據(jù)，使用Vuex可以避免數(shù)據(jù)重復(fù)定義和傳遞。需要對狀態(tài)進行復(fù)雜操作：如果需要對狀態(tài)進行復(fù)雜計算或異步操作，使用Vuex可以更好地管理這些操作。知識點2-單組件與多組件的狀態(tài)管理在單組件頁面中，Vue的狀態(tài)管理主要包含以下3個部分。View（視圖），以聲明方式將狀態(tài)映射到視圖。State（狀態(tài)），驅(qū)動應(yīng)用的數(shù)據(jù)源。Actions（操作），響應(yīng)在視圖上的用戶輸入導(dǎo)致的狀態(tài)變化?！皢蜗驍?shù)據(jù)流”理念的簡單示意圖如下圖所示。在多組件頁面中，上述單組件頁面狀態(tài)管理模式將會出現(xiàn)以下2個問題。多個組件依賴于同一狀態(tài)時，數(shù)據(jù)傳遞需要基于組件的props選項進行層層傳遞，操作十分繁瑣，且對于兄弟組件間的數(shù)據(jù)傳遞無能為力。來自不同組件的行為需要變更同一狀態(tài)時，需要采用父子組件直接引用數(shù)據(jù)或者通過事件來變更、同步拷貝的數(shù)據(jù)。因此，Vue的作者提出了Vuex的概念，即把組件的共享狀態(tài)抽取出來，以一個全局單例模式進行管理。知識點3-Vuex的原理Vuex的原理圖如下圖所示。Vuex的成員分析Vuex的流程分析Vuex中的Actions和Mutations知識點4-Vuex的安裝與配置Vuex的安裝（1）使用CDN方式使用CDN的方式引入Vuex，具體代碼如下所示。//引用最新版<scriptsrc="/vuex@4"></script>//引用特定版本<scriptsrc="/vuex@4.0.0/dist/vuex.global.js"></script>（2）使用npm或yarn方式在使用VueCLI創(chuàng)建項目時，可以使用npm或yarn安裝Vuex。在VScode中打開項目終端，在項目根目錄下執(zhí)行如下命令。//使用npm安裝Vuexnpminstallvuex@next--save或//使用yarn安裝Vuexyarnaddvuex@next--save在VueCLI創(chuàng)建的項目中配置Vuex在DOS系統(tǒng)窗口中使用vuecreatemyvuex命令創(chuàng)建一個名為“myvuex”的項目。進入配置項選擇頁面。創(chuàng)建一個具有Vuex功能的默認項目。具有Vuex功能的默認項目目錄結(jié)構(gòu)如下圖所示。Vuex和普通的全局對象有以下2個區(qū)別。Vuex的狀態(tài)存儲是響應(yīng)式的。Vue不能直接改變store中的狀態(tài)。知識鞏固與作業(yè)（1）回顧上課前的學(xué)習(xí)目標，對本節(jié)課知識點進行總結(jié)。（2）老師布置相關(guān)作業(yè)進行練習(xí)。第二課時（State、Getters、Mutations、Actions、Modules、Vuex與組合式API、實訓(xùn)：糧食信息列表頁面）回顧內(nèi)容回顧上節(jié)內(nèi)容，引出本節(jié)內(nèi)容回顧上節(jié)的內(nèi)容，并提問學(xué)生上節(jié)練習(xí)中的問題，學(xué)生回答完后，由上節(jié)內(nèi)容引出本節(jié)要講的State、Getters、Mutations、Actions、Modules、Vuex與組合式API、實訓(xùn)：糧食信息列表頁面等內(nèi)容。明確學(xué)習(xí)目標理解Vuex的核心概念掌握Vuex與組合式API的結(jié)合使用知識講解知識點1-StateState表示應(yīng)用程序的狀態(tài)，用于存儲Vuex中的數(shù)據(jù)，可以通過$store.state訪問其內(nèi)部存儲的數(shù)據(jù)。使用State存儲計數(shù)器項目中的數(shù)據(jù)使用VueCLI創(chuàng)建一個名為“counter”的計數(shù)器項目，讀者需要在counter項目的store文件夾下的index.js文件中，使用createStore()方法創(chuàng)建store，并在store的State對象中存儲根組件需要渲染的數(shù)據(jù)，具體代碼可參考教學(xué)PPT或教材。mapState輔助函數(shù)在組件中使用mapState輔助函數(shù)的步驟如下所示。引入mapState輔助函數(shù)在組件中引入mapState輔助函數(shù)，代碼如下。import{mapState}from'vuex'mapState輔助函數(shù)的配置mapState輔助函數(shù)可以有2種不同的配置類型，分別為字符串數(shù)組和對象。①字符串數(shù)組形式當映射的計算屬性的名稱與state的子節(jié)點名稱相同時，可以為mapState傳一個字符串數(shù)組，代碼如下。...mapState(['name','count'])②對象形式如果組件使用的計算屬性的名字與store中定義的狀態(tài)名字不一致，可以在mapState中傳入對象來進行配置，示例代碼如下。...mapState({ming:'name'},{countData:'count'})知識點2-GettersGetters表示派生狀態(tài)，用于從store中獲取State，并對State中的數(shù)據(jù)進行計算或篩選操作，然后返回一個新的值，這個值就是Vuex中的計算屬性。Getters的語法格式Getters的語法格式如下所示。getters:{doubleCount(state){returnstate.count*2//加工State中的數(shù)據(jù)}},使用Getters加工計數(shù)器項目中的數(shù)據(jù)使用Getter對計數(shù)器項目中的數(shù)據(jù)進行加工。定義一個名為doubleCount的Getters，使得doubleCount的返回值為count的值乘以2。index.js文件中的Getters選項代碼如下所示。。getters:{doubleCount:state=>state.count*2},使用Getters重構(gòu)App.vue文件，具體代碼可參考教學(xué)PPT或教材。Getters重構(gòu)后的計數(shù)器項目的顯示效果如下圖所示。mapGetters輔助函數(shù)除mapState外，Vuex還內(nèi)置了mapGetters輔助函數(shù)。mapGetters輔助函數(shù)同樣可以將將store中的Getters映射到局部計算屬性。基于mapGetters輔助函數(shù)，對本節(jié)中使用Getters重構(gòu)的App.vue文件再次進行優(yōu)化，步驟如下。引入mapGetters輔助函數(shù)在App.vue文件中引入mapGetters輔助函數(shù)，代碼如下。import{mapState,mapGetters}from'vuex'mapGetters輔助函數(shù)的配置對本節(jié)中App.vue文件中的12-22行代碼進行優(yōu)化，代碼如下。computed:{...mapState(['name','count']),...mapGetters(['doubleCount'])},知識點3-MutationsMutations的語法格式在Mutations中定義方法的語法格式如下所示。mutations:{方法名(state,payload){state.count=state.count+payload;}使用Mutations修改計數(shù)器項目中的數(shù)據(jù)接下來在計數(shù)器項目的Mutations中分別定義increase()、add()和jia()這3個方法，用于修改計數(shù)器項目中的count的值。在根組件中，單擊不同按鈕觸發(fā)對應(yīng)方法，從而改變count的增加量。修改index.js文件中的Mutations選項，代碼可參考教學(xué)PPT或教材。Mutations重構(gòu)后的計數(shù)器項目的顯示效果如下圖所示。mapMutations輔助函數(shù)除mapState、mapGetters外，Vuex還內(nèi)置了mapMutations輔助函數(shù)，mapMutations輔助函數(shù)可以將Mutations中的方法映射為組件的methods方法，使得組件可以直接調(diào)用Mutations中的方法來修改State數(shù)據(jù)。知識點4-ActionsActions的語法格式在Actions中定義方法的語法格式如下所示actions:{方法名(context){mit('Mutation中的方法名')}}在實際開發(fā)中，需要多次調(diào)用commit的情況下，通常會用到ES2015的參數(shù)解構(gòu)來簡化代碼，Actions簡化后的語法格式如下。actions:{方法名({commit}){commit('Mutation中的方法名')}}Actions與Mutations的區(qū)別Actions類似于Mutations，但兩者之間存在區(qū)別，如下。Actions提交的是Mutations，而不是直接變更狀態(tài)；Actions可以包含任意異步操作，如延遲請求、定時器等。使用Actions異步修改計數(shù)器項目中的數(shù)據(jù)使用Actions異步修改計數(shù)器項目中的數(shù)據(jù)的具體代碼可參考教學(xué)PPT或教材。Actions重構(gòu)后的計數(shù)器項目的顯示效果如下圖所示。mapActions輔助函數(shù)除mapState、mapGetters、mapMutations外，Vuex還內(nèi)置了mapActions輔助函數(shù)。mapActions輔助函數(shù)可以將Actions中的方法映射為組件的methods方法，使得組件可以直接調(diào)用Actions中的方法來觸發(fā)異步操作?；趍apActions輔助函數(shù)，對本節(jié)中使用Actions重構(gòu)的例子中的App.vue文件再次進行優(yōu)化，代碼可參考教學(xué)PPT或教材。知識點5-ModulesModules用于將store分割成多個模塊，每個模塊可以擁有自己的State、Getters、Mutations、Actions選項，并且Modules可以嵌套使用，形成樹形結(jié)構(gòu)。Modules的語法格式Modules的語法格式如下所示。//模塊AconstmoduleA={state:()=>({...}),mutations:{...},actions:{...},getters:{...}}//模塊BconstmoduleB={state:()=>({...}),mutations:{...},actions:{...}}//創(chuàng)建倉庫conststore=createStore({modules:{a:moduleA,b:moduleB}})store.state.a//->moduleA的狀態(tài)store.state.b//->moduleB的狀態(tài)應(yīng)用的模塊化目錄結(jié)構(gòu)對于大型應(yīng)用，如果store模塊劃分較多，Vuex建議項目結(jié)構(gòu)按照以下形式組織。└──store├──index.js#我們組裝模塊并導(dǎo)出store的地方├──actions.js#根級別的action├──mutations.js#根級別的mutation└──modules├──cart.js#購物車模塊└──products.js#產(chǎn)品模塊模塊的局部狀態(tài)每一個模塊都可看作一個簡單的小倉庫，因此模塊的功能與store的功能基本一致。模塊內(nèi)部的Mutations和Getters模塊內(nèi)部的Actions命名空間在默認情況下，模塊內(nèi)部的Getters、Actions和Mutations是注冊在全局命名空間下的，這使得多個模塊能夠?qū)ν粋€Getters、Actions或Mutations作出響應(yīng)。開啟命名空間的語法格式在帶命名空間下的模塊內(nèi)訪問Getters、Actions及Mutations知識點6-Vuex與組合式APIuseStore()的語法格式useStore()的語法格式如下所示。import{useStore}from'vuex'exportdefault{setup(){conststore=useStore()}}組合式API中訪問State和Getters在Vuex的組合式API中，如果想要訪問State和Getters，則需要使用computed()函數(shù)創(chuàng)建計算屬性，以保留響應(yīng)性，這與在選項式API中創(chuàng)建計算屬性等效，代碼可參考教學(xué)PPT或教材。組合式API中訪問Mutations和Actions在Vuex的組合式API中，如果想要訪問Mutations和Actions，則只需要在setup()函數(shù)中調(diào)用store對象的commit()和dispatch()函數(shù)，代碼可參考教學(xué)PPT或教材。知識點7-實訓(xùn)：糧食信息列表頁面糧食信息列表頁面結(jié)構(gòu)簡圖如下圖所示。實現(xiàn)糧食信息列表頁面的具體步驟如下所示。第1步，使用VueCLI創(chuàng)