輕鬆理解vuex的運用及常見面試問題

Vue的核心是數據驅動和組件化開發，無論是組件的封裝還是組件的傳參，都是面試中最常見的問題，也難倒了無數面試者，以下就跟大夥分享分享當vue 組件之間的通信感到崩潰時如何運用vuex及面試中常見vuex問題的解決。

先看常見問題：

使用Vuex只需執行 Vue.use(Vuex)，並在Vue的配置中傳入一個store對象的示例，store是如何實現注入的？

state內部是如何實現支持模塊配置和模塊嵌套的？

在執行dispatch觸發action（commit同理）的時候，只需傳入（type, payload），action執行函數中第一個參數store從哪裡獲取的？

如何區分state是外部直接修改，還是通過mutation方法修改的？

帶着這些疑問，讓我們先從什麼是vuex開始——

一、vuex是什麼？

Vuex是專門為Vue服務，用於管理頁面的數據狀態、提供統一數據操作的狀態管理系統，相當於數據庫mongoDB，MySQL等，只不過它的數據是存儲在內存中，頁面刷新即消失。

二、vue和vuex關係

看一下這個vue響應式的例子，vue中的data 、methods、computed，可以實現響應式。

視圖通過點擊事件，觸發methods中的increment方法，可以更改state中count的值，一旦count值發生變化，computed中的函數能夠把getCount更新到視圖。

那麼vuex又和vue這個響應式的例子有什麼關係呢？

視圖通過點擊事件，觸發mutations中方法，可以更改state中的數據，一旦state數據發生更改，getters把數據反映到視圖。

那麼actions,可以理解處理異步，而單純多加的一層。

既然提到了mutions actions這時候就不得不提commit，dispatch這兩個有什麼作用呢？

在vue例子中，通過click事件，觸發methods中的方法。當存在異步時，而在vuex中需要dispatch來觸發actions中的方法，actions中的commit可以觸發mutations中的方法。同步，則直接在組件中commit觸發vuex中mutations中的方法。

三、vuex實現

我們看下vuex中能像vue中實現改變狀態，更新視圖的功能

Store/index.js

App.vue

四、源碼分析

store注入組件install方法

vuex是通過vue插件機制將組件注入的首先使用vuex,需要安裝插件：

可見，store注入 vue的實例組件的方式，是通過vue的 mixin機制，藉助vue組件的生命周期鉤子 beforeCreate 完成的。即每個vue組件實例化過程中，會在 beforeCreate 鉤子前調用 vuexInit 方法。

vuex中的數據雙向綁定

getters實現

從上面源碼，我們可以看出Vuex的state狀態是響應式，是藉助vue的data是響應式，將state存入vue實例組件的data中；Vuex的getters則是藉助vue的計算屬性computed實現數據實時監聽。

mutations實現

actions實現

五、小結

Vuex是通過全局注入store對象，來實現組件間的狀態共享。在大型複雜的項目中（多級組件嵌套），需要實現一個組件更改某個數據，多個組件自動獲取更改後的數據進行業務邏輯處理，這時候使用vuex比較合適。假如只是多個組件間傳遞數據，使用vuex未免有點大材小用，其實只用使用組件間常用的通信方法即可。