Vuex基礎(二):可維護性目錄結構,getters,mapState,mapGetters

我們上一篇,是直接在 new Vuex.Store() 的過程中,傳入的 state 和 mutations,這個方法其實不是特別的好。我們接下來就按照常規的方法來做。

首先,在 store 文件夾下面創建一個 state 的文件夾,然後在 state 裏面,我們根據某些情況,state 的不同的形式,我們可以根據不同的模塊來區分不同的 state,我們目前先按照只有一個模塊的形式去做。

然後在 state 文件夾下面創建一個 state.js。

我們直接 export default { },因爲我們的 state 其實它就是一個初始的JS對象,我們的數據是在這個基礎上進行修改的。

然後我們在聲明 state 的過程當中,即便是一開始你用不到的一些字段或對象,你都要去事先給它申明一個值。

不然的話就跟我們之前講過的,我們在vue組件裏面,如果 data 一開始沒有聲明好一個值,那麼會導致你後續去增加這個值的時候,它的數據不是響應式的,它不會更新我們的視圖。

所以我們這邊使用的這個state,你就把它當做去寫一個 vue 組件時候,你寫的這個 data 方法裏面返回的那個對象一樣這麼去寫。需要去用到的字段,全部要一次性聲明好。

那麼爲什麼我們要新建一個文件夾和 js 文件呢?

我們這樣做的好處就是,我們每一樣東西都去單獨寫一個文件,那麼後續你就可以拆更多的文件,以一個更好的形式去組織你的代碼。

而不是你把所有的東西都寫在 store.js 這一個頁面裏面。

因爲我們現在應用的數據,還有我們的操作都非常的少,所以你寫在一起感覺也不是特別的奇怪。

但是當你的 mutations 或者 actions 變的非常多的時候,你內容的增加,會讓你的維護成本變得非常高。

所以一開始就建立一個好的目錄結構,是非常重要的一件事情。

然後同樣的,我們的 mutations,也要去把它拿到一個新的文件裏面。

看到這裏,大家可能會有個疑問,爲什麼我們上面要叫它 defaultState,而不叫它 state 呢?

因爲我們如果有服務端渲染的時候,其實會有一部分的數據直接傳到我們的客戶端。

那這個時候我們會用拿到的這部分數據,去覆蓋我們的 defaultState 數據。

因爲我們 defaultState 的數據沒有任何跟業務相關的一些內容,所以它只是一個默認數據,不是我們一個真正的狀態。

然後對於 mutations 來說,它是一個操作的定義,所以它不管你有沒有默認數據,它的操作都是一樣的。

 

然後我們講下 getters。那麼 getters 是一個什麼樣的概念呢?你完全可以把它理解爲,我們在組件內寫的 computed。

getters 是爲了方便我們去生成一些,在應用裏面可以直接用的數據。

因爲我們在跟後端開發進行聯調的時候,我們會發現,他們提供給我們的一些數據,有時候並不適合我們直接在 Vue 層去顯示,這些數據,我們還要進行一些組裝。

那麼這個組裝的過程,我們當然可以直接的,拿到我們頁面裏面去寫個 computed,它也可以幫我們去組裝數據。

但是如果這個組裝的過程,我們不僅僅是在這個頁面上要用,在其他的頁面上也要用。

那麼你就不可能每個地方都寫這相同的一個 computed,這樣的話,你的代碼就重複了。而且你將來要去維護的話,也會變的比較麻煩。

那這個時候,我們如果把數據放在 state 裏面,然後我們可以通過 getters,給我們統一的去產出這些,我們在頁面裏面就可以直接去用的數據。

如果我們去修改了 firstName 或者 lastName,都會導致我們的 fullName 進行更新。

所以,我們完全可以把 getters 理解爲一個 computed,只不過它是一個在 Vuex 裏面去使用的 computed。

 

我們每次在組件裏面這麼去寫 this.$store.state.xxx 或者 this.$store.getters.xxx,會非常的麻煩。

那麼有沒有更簡單的辦法,幫我們去處理這些內容呢?

Vuex 爲我們提供了非常多的幫助方法,能夠讓我們在組件內快速的去使用 Vuex。

mapState 和 mapGetters 都是幫助方法。

它能夠讓我們非常方便的去在組件內部,使用我們的一些數據。

那麼我們就不需要去自己聲明每一個數據,而且還要去通過 return this.$store.state.xxx。

如果都是同名的,那麼我們就可以直接通過一個數組去傳。

那如果有不同名的情況,比如 count ,我們想重新命名爲 result,那怎麼辦呢?

 

那麼,我們還可以有更好的方法去做,那就是通過一個函數:

如果我們需要在 computed 裏面做一些計算,那麼肯定用這個方式是最好的。

因爲你如果只是用字符串來做,那麼你沒有辦法做任何的計算。

mapState 和 mapGetters 也都是一樣的用法。

這就是在我們組件內部去使用 state 和 getters 的一個簡單方法。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章