《vue應(yīng)用程序開(kāi)發(fā)》Vuex

《Vue應(yīng)用程序開(kāi)發(fā)》Vuex第8章：Vuex簡(jiǎn)單使用8.1Vuex的概述安裝和基本使用8.2Vuex的復(fù)雜使用第1節(jié)Vuex的概述安裝和基本使用011.1Vuex概述

在開(kāi)發(fā)應(yīng)用程序時(shí)，通常會(huì)抽取出很多組件進(jìn)行開(kāi)發(fā)，而各個(gè)組件之間經(jīng)常需要進(jìn)行通信。前面我們介紹過(guò)使組件之間的通信方法，但隨著應(yīng)用不斷的擴(kuò)展、變化，通信變得越來(lái)越復(fù)雜，越來(lái)越難追蹤錯(cuò)誤。我們希望項(xiàng)目的各個(gè)組件和數(shù)據(jù)都易維護(hù)、可擴(kuò)展和好調(diào)試。于是數(shù)據(jù)管理模式應(yīng)運(yùn)而生。Vuex是一個(gè)專門為Vue.js應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式。1.1Vuex概述

狀態(tài)管理模式中，包括狀態(tài)（state）、視圖（View）和行為（actions）。state表示應(yīng)用中的和狀態(tài)相關(guān)的數(shù)據(jù)，View在視圖中顯示State表示的數(shù)據(jù)，actions表示在相應(yīng)View上用戶的操作，來(lái)改變state。這是MVVM模式下的視圖和數(shù)據(jù)的相應(yīng)模式。從圖中可以看出這是一種單向的數(shù)據(jù)流，即View驅(qū)動(dòng)Actions，Actions修改state，state被修改后View同時(shí)改變。1.1Vuex概述

上面所說(shuō)的狀態(tài)，就是數(shù)據(jù)中可以在多個(gè)組件間共享的部分，是一些具體的數(shù)據(jù)，比如登錄信息、購(gòu)物車信息，該信息會(huì)在多個(gè)組件中都被用到，多個(gè)組件中共同用到的信息應(yīng)該是相同的，一旦改變，所有的組件中該信息都會(huì)變化。 Vuex可以有效的解決組件間的通信問(wèn)題，它可以跟蹤每一個(gè)狀態(tài)的變化，對(duì)組件中的數(shù)據(jù)流進(jìn)行單向的、可預(yù)期的管理。Vuex采用集中式存儲(chǔ)管理應(yīng)用程序中所有組件的狀態(tài)，避免了組件之間的傳參、嵌套傳參等低效、不可擴(kuò)展的信息共享方式。1.2Vuex的安裝1.在網(wǎng)頁(yè)中通過(guò)script標(biāo)簽在網(wǎng)頁(yè)中引入。<scriptsrc="js/Vue.js"></script><scriptsrc="js/Vuex.js"></script>2.在Vue.js的腳手架中安裝和使用Vuex安裝vuex：npminstallvuex--save3.在Vue.js腳手架vue-cli3版本以后，可以在搭建項(xiàng)目時(shí)，直接選擇安裝Vuex（推薦）1.3Vuex的基本使用1.在store目錄下的index.js文件中：引入Vue和Vuex，創(chuàng)建Vuex實(shí)例，使用exportdefault將Vuex的信息通過(guò)Vuex.Store對(duì)象暴露出，便于其他組件使用Vuex。2.在mian.js引入vuex3.頁(yè)面上使用vuex的值1.3Vuex的基本使用Vuex應(yīng)用的核心就是Store。Store中包含有各種Vuex的狀態(tài)和操作狀態(tài)的方法，主要包括state、mutation、getter和actions。和Vue對(duì)象做一個(gè)對(duì)比，Vuex中，state表示Vuex的狀態(tài)，和Vue對(duì)象的數(shù)據(jù)data相仿，getter和Vue對(duì)象的計(jì)算屬性computed相仿，mutation和Vue的方法method相仿，action是一種特殊的方法（method），用于處理異步等特殊情況，和封裝或調(diào)用了已有方法的方法相仿。在Vue對(duì)象中定義了Vuex的Stroe對(duì)象之后，各個(gè)組件能通過(guò)

this.$store

訪問(wèn)到Vuex的Store對(duì)象。1.3Vuex的基本使用Vue組件（視圖）通過(guò)dispatch的方式調(diào)用actions，一般actions中封裝的是異步操作，常見(jiàn)的是對(duì)后臺(tái)服務(wù)器的數(shù)據(jù)調(diào)用。actions中通過(guò)commit的方式調(diào)用mutations，只有在mutations中才能修改state。state修改之后會(huì)自動(dòng)在視圖或Vue組件中自動(dòng)顯示，Vuex的state可以在Vue的調(diào)試工具Devtools中查看、調(diào)試。它們之間的關(guān)系如下圖所示。第2節(jié)Vuex的復(fù)雜使用022.1Vuex的復(fù)雜使用mutationmutation就是store中的methods，它必須是同步函數(shù)。每個(gè)mutation都有一個(gè)字符串的事件類型(type)和一個(gè)回調(diào)函數(shù)(handler)。這個(gè)回調(diào)函數(shù)就是我們實(shí)際進(jìn)行狀態(tài)更改的地方，并且它會(huì)接受state作為第一個(gè)參數(shù)，payload作為第二個(gè)參數(shù)（額外的參數(shù)）：使用commit調(diào)用mutation，語(yǔ)法示例：this.$mit('mutations名稱',value)2.1Vuex的復(fù)雜使用action和mutation相似，aciton可以修改Vuex的狀態(tài)（state）。action可以包含異步操作。mutation中不能進(jìn)行異步操作，只能執(zhí)行同步操作。action中不能直接改變狀態(tài)（state），修改狀態(tài)需要在action內(nèi)部執(zhí)行提交（commit）操作，調(diào)用mutation。當(dāng)執(zhí)行異步操作時(shí)，比如讀寫本地存貯、發(fā)送AJAX請(qǐng)求、延時(shí)執(zhí)行等，需要使用action完成。通過(guò)dispatch方法調(diào)用action，語(yǔ)法示例：this.$store.dispatch('actions名稱',value)2.1Vuex的復(fù)雜使用gettersgetters和Vue對(duì)象中的計(jì)算屬性computed類似。在組件里，一般使用getters來(lái)獲取state。getters的返回值會(huì)根據(jù)它的依賴被緩存起來(lái)，且只有當(dāng)它的依賴值發(fā)生了改變才會(huì)被重新計(jì)算。getters可以用于監(jiān)聽(tīng)、state中的值的變化，返回計(jì)算后的結(jié)果getters是不一定會(huì)用到的，在有多個(gè)子組件的情況下,是使用getters的比較合適的場(chǎng)景。mapGetters是將store中的getter映射到局部計(jì)算屬性。登錄實(shí)例的getters的定義如下，allNum的含義為登錄的總?cè)藬?shù)，包括未登錄的游客和已登錄的用戶的綜合，getters定義在index.js中。//

定義gettersconst

getters

=

{

allNum:(state)=>{

return

state.in+state.out

}}2.1Vuex的復(fù)雜使用mapState、mapMutations、mapActions和mapGetters如果程序中的state、mutations和actions的數(shù)量比較多，Vuex提供了一種簡(jiǎn)單的方式來(lái)來(lái)批量定義這些對(duì)象，通過(guò)mapState、mapMutations、mapActions和mapGetters來(lái)一次性的定義多個(gè)對(duì)象。該種方式?jīng)]有提供額外的功能，只是在語(yǔ)法上簡(jiǎn)化了定義state、mutations、actions和getters的語(yǔ)法結(jié)構(gòu)。2.1Vuex的復(fù)雜使用如果要在程序中使用mapState，需要在使用之前在代碼中將其導(dǎo)入（import），代碼參考如下。import{mapState}from'Vuex'經(jīng)常使用擴(kuò)展運(yùn)算符來(lái)進(jìn)行定義map