Vue.js 3前端開發(fā)基礎(chǔ)及項(xiàng)目化應(yīng)用 教案 單元9 狀態(tài)管理-Vuex

《Vue.js前端開發(fā)基礎(chǔ)及項(xiàng)目化應(yīng)用》教學(xué)設(shè)計(jì)課程名稱：Vue.js前端開發(fā)基礎(chǔ)及項(xiàng)目化應(yīng)用授課年級(jí)：授課學(xué)期：學(xué)年第一學(xué)期教師姓名：2023年09月09日課題名稱單元9狀態(tài)管理——Vuex計(jì)劃學(xué)時(shí)6學(xué)時(shí)內(nèi)容分析針對(duì)復(fù)雜邏輯中，僅通過組件通信或是全局定義已無法適應(yīng)需要，Vue提供了狀態(tài)管理Vuex來處理組件間的共享數(shù)據(jù)（狀態(tài)）。本單元將介紹狀態(tài)管理Vuex插件的安裝，Vuex狀態(tài)管理模式，Vuex核心屬性，以及Vuex管理共享狀態(tài)的具體方法和應(yīng)用。通過在“記錄用戶瀏覽歷史”任務(wù)中應(yīng)用Vuex，幫助學(xué)習(xí)者進(jìn)一步理解狀態(tài)管理模式，并掌握state、getters、mutations、actions等屬性的應(yīng)用方法。教學(xué)目標(biāo)及基本要求1.理解Vuex狀態(tài)管理模式2.能夠安裝和使用Vuex3.能夠利用store實(shí)例存儲(chǔ)和更新共享狀態(tài)4.能夠應(yīng)用Vuex管理共享狀態(tài)教學(xué)重點(diǎn)1.能夠利用store實(shí)例存儲(chǔ)和更新共享狀態(tài)2.能夠應(yīng)用Vuex管理共享狀態(tài)教學(xué)難點(diǎn)能夠應(yīng)用Vuex管理共享狀態(tài)教學(xué)方式教學(xué)采用教師使用PPT講解和案例示范相結(jié)合的方式教學(xué)過程第一課時(shí)（狀態(tài)管理模式，Vuex安裝與使用）一、創(chuàng)設(shè)情境，引入Vuex狀態(tài)管理1.教師通過應(yīng)用場(chǎng)景描述，引出共享狀態(tài)管理的概念。當(dāng)大型項(xiàng)目中，有多個(gè)組件需要共享某些數(shù)據(jù)時(shí)，因組件間錯(cuò)綜復(fù)雜的關(guān)系，會(huì)使得組件間通信代碼的編寫和維護(hù)也隨之變得更為困難。Vue提供的Vuex能夠很好地對(duì)共享數(shù)據(jù)進(jìn)行統(tǒng)一管理，它就像一個(gè)專門管理數(shù)據(jù)的倉庫，使得組件間的數(shù)據(jù)共享更為簡(jiǎn)單高效。2.明確學(xué)習(xí)目標(biāo)。了解單向數(shù)據(jù)流概念了解狀態(tài)管理模式掌握Vuex的安裝和使用方法二、進(jìn)行重點(diǎn)知識(shí)的講解1.教師根據(jù)課件，介紹單向數(shù)據(jù)流原理，并通過代碼進(jìn)行演示。（1）單向數(shù)據(jù)流單向數(shù)據(jù)流是指只能從一個(gè)方向來修改狀態(tài)的數(shù)據(jù)流。（2）使用案例講解單向數(shù)據(jù)流的實(shí)現(xiàn)。2.教師根據(jù)課件，講解狀態(tài)管理模式的工作機(jī)制。（1）狀態(tài)管理模式概念Vuex的核心思想是采用store（容器）管理組件間共享的一組狀態(tài)。（2）狀態(tài)管理模式的核心屬性狀態(tài)管理模式的工作流程3.教師根據(jù)課件，講解Vuex安裝和使用方法，并使用代碼進(jìn)行演示。（1）使用CDN方式安裝Vuex<scriptsrc="/vuex"></script>（2）Vuex使用方法通過例9-2講解Vuex應(yīng)用過程。三、歸納總結(jié)，布置課后作業(yè)1.回顧上課前的學(xué)習(xí)目標(biāo)，對(duì)本節(jié)課知識(shí)點(diǎn)進(jìn)行總結(jié)。教師帶領(lǐng)學(xué)生總結(jié)本節(jié)課需要熟悉的知識(shí)點(diǎn)，包括單向數(shù)據(jù)流、Vuex狀態(tài)管理模式的核心屬性，Vuex狀態(tài)管理模式的工作流程，Vuex安裝步驟，Vuex應(yīng)用方法。2.布置隨堂練習(xí)，檢查學(xué)生掌握情況。根據(jù)在線課程資源，給學(xué)生布置隨堂練習(xí)，檢測(cè)學(xué)生的掌握程度，并對(duì)學(xué)生出現(xiàn)的問題進(jìn)行解決。3.使用在線學(xué)習(xí)平臺(tái)下發(fā)課后作業(yè)。第二課時(shí)（Vuex核心屬性：state和getters）一、回顧上節(jié)課內(nèi)容，繼續(xù)講解本課時(shí)的知識(shí)1.教師對(duì)學(xué)生們的疑問進(jìn)行統(tǒng)一答疑。2.回顧上個(gè)課時(shí)所學(xué)習(xí)的內(nèi)容，繼續(xù)介紹本課時(shí)的內(nèi)容。上節(jié)課主要為大家介紹了單向數(shù)據(jù)流，Vuex狀態(tài)管理模式，Vuex狀態(tài)管理模式的核心屬性、工作流程，Vuex的安裝與使用方法。接下來，本節(jié)課將通過實(shí)例講解Vuex核心屬性中的state和getters的使用方法。3.明確學(xué)習(xí)目標(biāo)。掌握state的使用方法掌握getters的使用方法二、進(jìn)行重點(diǎn)知識(shí)的講解1.教師根據(jù)課件，介紹state的作用和使用方法，并使用代碼進(jìn)行演示。（1）state的作用。state用于存儲(chǔ)狀態(tài)。（2）state使用方法，并使用代碼進(jìn)行演示。直接讀取方式輔助函數(shù)方式2.教師根據(jù)課件，介紹getters的作用和使用方法，并使用代碼進(jìn)行演示。（1）getters的作用。getters可以理解為store實(shí)例的計(jì)算屬性。（2）getters使用方法，并使用代碼進(jìn)行演示。直接讀取方式輔助函數(shù)方式三、歸納總結(jié)，布置課后作業(yè)1.回顧上課前的學(xué)習(xí)目標(biāo)，對(duì)本節(jié)課知識(shí)點(diǎn)進(jìn)行總結(jié)。教師帶領(lǐng)學(xué)生總結(jié)本節(jié)課需要了解的state、getters作用，state和getters的多種使用方法，并了解各自的應(yīng)用場(chǎng)景。2.布置隨堂練習(xí)，檢查學(xué)生掌握情況。根據(jù)在線課程資源，給學(xué)生布置隨堂練習(xí)，檢測(cè)學(xué)生的掌握程度，并對(duì)學(xué)生出現(xiàn)的問題進(jìn)行解決。3.使用在線學(xué)習(xí)平臺(tái)下發(fā)課后作業(yè)。第三課時(shí)（Vuex核心屬性：mutations、actions和modules）一、回顧上節(jié)課內(nèi)容，繼續(xù)講解本課時(shí)的知識(shí)1.教師對(duì)學(xué)生們的疑問進(jìn)行統(tǒng)一答疑。2.回顧上個(gè)課時(shí)所學(xué)習(xí)的內(nèi)容，繼續(xù)介紹本課時(shí)的內(nèi)容。上節(jié)課主要為大家介紹了Vuex核心屬性中的state和getters的使用方法。接下來，本節(jié)課將通過實(shí)例講解Vuex其他核心屬性，包括mutations、actions和modules的使用方法。3.明確學(xué)習(xí)目標(biāo)。掌握mutations的使用方法掌握actions的使用方法掌握modules的使用方法二、進(jìn)行重點(diǎn)知識(shí)的講解1.教師根據(jù)課件，介紹mutations的作用和使用方法，并使用代碼進(jìn)行演示。（1）mutations的作用。mutations用于state中狀態(tài)的修改，并且是唯一的更新state的途徑。（2）mutations使用方法，并使用代碼進(jìn)行演示。使用步驟如下：在store實(shí)例中創(chuàng)建mutations對(duì)象，注冊(cè)事件在需要更新state中狀態(tài)之處，通過提交mutations觸發(fā)某個(gè)事件類型的回調(diào)函數(shù)的執(zhí)行2.教師根據(jù)課件，介紹actions的作用和使用方法，并使用代碼進(jìn)行演示。（1）actions的作用。actions用于間接進(jìn)行state中狀態(tài)的修改。（2）actions使用方法，并使用代碼進(jìn)行演示。使用步驟如下：在store實(shí)例中創(chuàng)建actions對(duì)象，注冊(cè)事件在需要更新state中狀態(tài)之處，通過dispatch函數(shù)以分發(fā)方式觸發(fā)事件回調(diào)函數(shù)3.教師根據(jù)課件，介紹modules的作用和使用方法，并使用代碼進(jìn)行演示。（1）modules的作用。modules用于將store實(shí)例分割為多個(gè)模塊，每個(gè)模塊就相當(dāng)于一個(gè)子store，可以擁有store的所有屬性。（2）modules使用方法，并使用代碼進(jìn)行演示。使用步驟如下：在store實(shí)例中創(chuàng)建modules對(duì)象，注冊(cè)子模塊在每個(gè)子模塊中，設(shè)置namespaced屬性值為true的方式，使各模塊擁有自己的命名空間使用模塊的功能時(shí)，也需要指明其所屬命名空間三、歸納總結(jié)，布置課后作業(yè)1.回顧上課前的學(xué)習(xí)目標(biāo)，對(duì)本節(jié)課知識(shí)點(diǎn)進(jìn)行總結(jié)。教師帶領(lǐng)學(xué)生總結(jié)本節(jié)課需要了解的mutations、actions和modules作用，mutations、actions和modules的使用方法，并了解各自的應(yīng)用場(chǎng)景。2.布置隨堂練習(xí)，檢查學(xué)生掌握情況。根據(jù)在線課程資源，給學(xué)生布置隨堂練習(xí)，檢測(cè)學(xué)生的掌握程度，并對(duì)學(xué)生出現(xiàn)的問題進(jìn)行解決。3.使用在線學(xué)習(xí)平臺(tái)下發(fā)課后作業(yè)。第五課時(shí)（Vuex在實(shí)際項(xiàng)目中的應(yīng)用）一、回顧上節(jié)課內(nèi)容，繼續(xù)講解本課時(shí)的知識(shí)1.教師對(duì)學(xué)生們的疑問進(jìn)行統(tǒng)一答疑。2.回顧上個(gè)課時(shí)所學(xué)習(xí)的內(nèi)容，繼續(xù)介紹本課時(shí)的內(nèi)容。上節(jié)課主要為大家介紹了Vuex核心屬性，包括mutations、actions和modules的作用以及使用方法。接下來，本節(jié)課將通過實(shí)際應(yīng)用項(xiàng)目，來進(jìn)一步深入理解Vuex狀態(tài)管理模式的工作流程，并掌握Vuex的應(yīng)用方法。3.明確學(xué)習(xí)目標(biāo)。理解Vuex狀態(tài)管理模式掌握Veux的五個(gè)核心屬性的使用方法二、進(jìn)行重點(diǎn)知識(shí)的講解1.教師根據(jù)課件，介紹項(xiàng)目8——用戶登錄及注冊(cè)的需求描述、實(shí)現(xiàn)思路和代碼實(shí)現(xiàn)。（1）需求描述為了了解用戶對(duì)網(wǎng)站的使用情況，需要記錄用戶登錄后瀏覽過的頁面，保存用戶行為痕跡，以便分析網(wǎng)站各欄目受關(guān)注的程度。（2）實(shí)現(xiàn)思路將首頁、登錄/注冊(cè)、名城詩詞、旅游信息和會(huì)員中心部分均構(gòu)建成局部組件，并將其作為根組件的子組件。在首頁上設(shè)置“瀏覽歷史”鏈接，以獲取用戶瀏覽歷史頁面信息。采用Vuex來存儲(chǔ)、記錄用戶瀏覽過的頁面。創(chuàng)建store實(shí)例，在state中定義一個(gè)數(shù)組，用于記錄用戶瀏覽的頁面（即跳轉(zhuǎn)路由的名字）；在getters中定義讀取數(shù)組的計(jì)算屬性；在mutations中定義添加瀏覽頁面的函數(shù)；在actions中定義模擬異步處理，實(shí)現(xiàn)提交mutations。通過路由管理器，實(shí)現(xiàn)不同頁面間的跳轉(zhuǎn)。創(chuàng)建路由管理器實(shí)例；定義全局前置守衛(wèi)，判斷目標(biāo)路由是否滿足登錄要求，如果滿足則跳轉(zhuǎn)到目標(biāo)路由，否則跳轉(zhuǎn)到登錄路由，同時(shí)顯示來源路由；定義全局后置守衛(wèi)。其功能是，當(dāng)路由跳轉(zhuǎn)完成時(shí)，將該路由添加到state的數(shù)組中。（3）功能實(shí)現(xiàn)任務(wù)9-1構(gòu)建頁面布局任務(wù)9-2實(shí)現(xiàn)瀏覽歷史的記錄和獲取功能三、歸納總結(jié)，布置課后作業(yè)1.回顧上課前的學(xué)習(xí)目標(biāo)，對(duì)本節(jié)課知識(shí)點(diǎn)進(jìn)行總結(jié)。教師帶領(lǐng)學(xué)生總結(jié)本節(jié)課需要熟悉的知識(shí)點(diǎn)，包括進(jìn)一步理解Vuex狀態(tài)管理模式的工作流程，掌握Vuex核心屬性的使用方法，Vuex核心屬性的應(yīng)用過程。2.布置隨堂練習(xí)，檢查學(xué)生掌握情況。根據(jù)在線課程資源，給學(xué)生布置隨堂練習(xí)，檢測(cè)學(xué)生的掌握程度，并對(duì)學(xué)生出現(xiàn)的問題進(jìn)行解決。3.使用在線學(xué)習(xí)平臺(tái)下發(fā)課后作業(yè)。第六課時(shí)（項(xiàng)目實(shí)踐）項(xiàng)目實(shí)踐主要針對(duì)本單元中需要重點(diǎn)掌握的知識(shí)點(diǎn)，通過項(xiàng)目功能實(shí)現(xiàn)來加強(qiáng)概念的理解，熟悉并掌握編程知識(shí)點(diǎn)的應(yīng)用，通過項(xiàng)目實(shí)踐可以考察同學(xué)對(duì)知識(shí)點(diǎn)的掌握情況和應(yīng)用能力。題目