Vue的核心是數(shù)據(jù)驅(qū)動(dòng)和組件化開(kāi)發(fā)，無(wú)論是組件的封裝還是組件的傳參，都是面試中最常見(jiàn)的問(wèn)題，也難倒了無(wú)數(shù)面試者，以下就跟大伙分享分享當(dāng)vue 組件之間的通信感到崩潰時(shí)如何運(yùn)用vuex及面試中常見(jiàn)vuex問(wèn)題的解決。

先看常見(jiàn)問(wèn)題：

使用Vuex只需執(zhí)行 Vue.use(Vuex)，并在Vue的配置中傳入一個(gè)store對(duì)象的示例，store是如何實(shí)現(xiàn)注入的?state內(nèi)部是如何實(shí)現(xiàn)支持模塊配置和模塊嵌套的?在執(zhí)行dispatch觸發(fā)action(commit同理)的時(shí)候，只需傳入(type, payload)，action執(zhí)行函數(shù)中第一個(gè)參數(shù)store從哪里獲取的?如何區(qū)分state是外部直接修改，還是通過(guò)mutation方法修改的?帶著這些疑問(wèn)，讓我們先從什么是vuex開(kāi)始——

一、vuex是什么?

Vuex是專門為Vue服務(wù)，用于管理頁(yè)面的數(shù)據(jù)狀態(tài)、提供統(tǒng)一數(shù)據(jù)操作的狀態(tài)管理系統(tǒng)，相當(dāng)于數(shù)據(jù)庫(kù)mongoDB，MySQL等，只不過(guò)它的數(shù)據(jù)是存儲(chǔ)在內(nèi)存中，頁(yè)面刷新即消失。

二、vue和vuex關(guān)系

看一下這個(gè)vue響應(yīng)式的例子，vue中的data 、methods、computed，可以實(shí)現(xiàn)響應(yīng)式。視圖通過(guò)點(diǎn)擊事件，觸發(fā)methods中的increment方法，可以更改state中count的值，一旦count值發(fā)生變化，computed中的函數(shù)能夠把getCount更新到視圖。

那么vuex又和vue這個(gè)響應(yīng)式的例子有什么關(guān)系呢?視圖通過(guò)點(diǎn)擊事件，觸發(fā)mutations中方法，可以更改state中的數(shù)據(jù)，一旦state數(shù)據(jù)發(fā)生更改，getters把數(shù)據(jù)反映到視圖。那么actions,可以理解處理異步，而單純多加的一層。既然提到了mutions actions這時(shí)候 就不得不提commit，dispatch這兩個(gè)有什么作用呢?在vue例子中，通過(guò)click事件，觸發(fā)methods中的方法。當(dāng)存在異步時(shí)，而在vuex中需要dispatch來(lái)觸發(fā)actions中的方法，actions中的commit可以觸發(fā)mutations中的方法。同步，則直接在組件中commit觸發(fā)vuex中mutations中的方法。

三、vuex實(shí)現(xiàn)

我們看下vuex中能像vue中實(shí)現(xiàn)改變狀態(tài)，更新視圖的功能。

Store/index.js

App.vue

四、源碼分析

store注入組件install方法vuex是通過(guò)vue插件機(jī)制將組件注入的。

首先使用vuex,需要安裝插件：

可見(jiàn)，store注入 vue的實(shí)例組件的方式，是通過(guò)vue的 mixin機(jī)制，借助vue組件的生命周期 鉤子 beforeCreate 完成的。即 每個(gè)vue組件實(shí)例化過(guò)程中，會(huì)在 beforeCreate 鉤子前調(diào)用 vuexInit 方法。

vuex中的數(shù)據(jù)雙向綁定

getters實(shí)現(xiàn)

從上面源碼，我們可以看出Vuex的state狀態(tài)是響應(yīng)式，是借助vue的data是響應(yīng)式，將state存入vue實(shí)例組件的data中;Vuex的getters則是借助vue的計(jì)算屬性computed實(shí)現(xiàn)數(shù)據(jù)實(shí)時(shí)監(jiān)聽(tīng)。

mutations實(shí)現(xiàn)

actions實(shí)現(xiàn)

五、小結(jié)

Vuex是通過(guò)全局注入store對(duì)象，來(lái)實(shí)現(xiàn)組件間的狀態(tài)共享。在大型復(fù)雜的項(xiàng)目中(多級(jí)組件嵌套)，需要實(shí)現(xiàn)一個(gè)組件更改某個(gè)數(shù)據(jù)，多個(gè)組件自動(dòng)獲取更改后的數(shù)據(jù)進(jìn)行業(yè)務(wù)邏輯處理，這時(shí)候使用vuex比較合適。假如只是多個(gè)組件間傳遞數(shù)據(jù)，使用vuex未免有點(diǎn)大材小用，其實(shí)只用使用組件間常用的通信方法即可。