有太多人不知道為什么要使用vuex，而使用它的目的還停留在“這是一個(gè)新技術(shù)，大家都在用，所以我也要用”
vuex并不難編寫，但用好卻不容易，“過度封裝”“過早優(yōu)化”十分常見。
如果你不知道為什么要使用它，那一定做不到用好它。所以這篇文章將解析vuex的優(yōu)缺點(diǎn)，讓你知道在什么情況下應(yīng)該使用它，否則不該使用。
先提出觀點(diǎn): 能放在組件中的狀態(tài)就不要放在state里，state只保存全局?jǐn)?shù)據(jù)
任何東西有好也有壞，當(dāng)好處大于壞處的場(chǎng)景下我們才應(yīng)該使用它，vuex也是如此。
所以在使用它之前 必須明了它潛在的缺點(diǎn)
缺點(diǎn)
- 代碼會(huì)更加復(fù)雜，原本只需要寫在一個(gè)組件里的代碼，現(xiàn)在需要寫在多個(gè)地方(store中申明并定義好action等，組件中引入store去使用)，這也拋棄了單文件組件的優(yōu)勢(shì)。
- 當(dāng)組件使用了store中的數(shù)據(jù)，就意味著這個(gè)組件將不再是一個(gè)“無副作用”的組件，那么這個(gè)組件的可重用性將大打折扣。
- Store只不過是一種全局變量，從一開始學(xué)習(xí)代碼的時(shí)候有人就告訴我們: 不要去聲明和操作全局變量，這將導(dǎo)致狀態(tài)錯(cuò)綜復(fù)雜讓人頭疼。
- Vue組件的父子組件通訊機(jī)制(emit和props)很好, 能夠完美的解耦各個(gè)組件, 請(qǐng)一定要優(yōu)先使用這種通訊方式.
為了避免諸多缺點(diǎn) 在使用Vuex之前有必要思考一下幾點(diǎn):
1. 使用vuex是否會(huì)引入垃圾變量
Store不會(huì)像組件一樣有生命周期, 那么放在Store的狀態(tài)(State)如果管理不好就會(huì)變成垃圾變量, 這也是能不能將變量放在Store中的重要判斷條件.
所以記得不再使用的State記得銷毀.
雖然JS也有GC, 但是和其他語言一樣的, GC是有代價(jià)的, 如果能一個(gè)變量能簡(jiǎn)單的被銷毀就應(yīng)該及時(shí)銷毀它, 正如Vue組件Destory機(jī)制存在的意義.
但其實(shí), Store中沒有生命周期機(jī)制 也沒有提供給用戶簡(jiǎn)單的銷毀狀態(tài)的機(jī)制, 所以只能通過 a = null 這樣的寫法, 這樣的寫法是低效的, 所以如果當(dāng)一個(gè)變量應(yīng)該頻繁的被創(chuàng)建/銷毀時(shí), 它就不應(yīng)該放在Store里.
2. 使用vuex會(huì)不會(huì)造成數(shù)據(jù)流錯(cuò)亂
單向數(shù)據(jù)流這個(gè)理念在引入Vuex之后可能會(huì)被開發(fā)者打亂. 但單向數(shù)據(jù)流無疑是應(yīng)該遵守的.
Store既然是全局的, 那總會(huì)有人為了方便 在本來應(yīng)該在子組件emit事件讓父組件去請(qǐng)求api的場(chǎng)景下, 子組件直接使用vuex的action去操作了api.
這樣的壞處不然而喻:
- 子組件無法解耦.
- 數(shù)據(jù)流錯(cuò)亂, 違背了單向數(shù)據(jù)庫原則
- 多個(gè)地方都使用了vuex中的全局方法或狀態(tài)，不易重構(gòu).
我舉的例子只是其一, 以"悲觀"的心態(tài)來猜測(cè)開發(fā)者寫出的代碼, 最后的錯(cuò)亂程度可能是無法想象的.
Store本身沒有錯(cuò), 但如果開發(fā)者用不好, 那就不要使用.
如何正確的使用Vuex
說了怎么多, vuex到底應(yīng)該如何正確的打開?
筆者有幾個(gè)準(zhǔn)則
少用vuex
最好的避免壞處的方式就是不用.
人無完人, 誰也不能確定自己寫出的代碼是完美的, 說不定自以為完美的代碼對(duì)于其他人來說就是樂色, 為了凈化開發(fā)環(huán)境, 寫越簡(jiǎn)單的代碼被人吐槽的概率越小. 當(dāng)然也是因?yàn)樯系巯矚g簡(jiǎn)單 - 奧卡姆剃刀定律
在項(xiàng)目中，vue提供的props, on和emit已經(jīng)能滿足90%的數(shù)據(jù)傳遞需求，這種傳遞方式是“無副作用”的, 應(yīng)當(dāng)優(yōu)先使用.
以"全局狀態(tài)"的概念來小心看待vuex
牢記全局狀態(tài)的副作用, 只有在對(duì)比了各種實(shí)現(xiàn)方式后, 發(fā)現(xiàn)vuex還是最優(yōu)解時(shí)才使用它.
最后
我的觀點(diǎn)可能會(huì)有些許偏激或者是不正確, 希望能在下方評(píng)論區(qū)得到你的建議.
