Vuex-全局状态集中式管理神器，做vue项目不知道Vuex真的out了
目錄
一、概念
1.什么是vuex？
2.狀態管理到底是什么?
3.等等,如果是這樣的話,為什么官方還要專門出一個插件Vuex呢?難道我們不能自己封裝個對象來管理嗎?
4.管理什么狀態呢？
二、.單界面的狀態管理
三、多界面的狀態管理-vuex。
1.安裝vuex
2.vuex是如何實現多界面狀態管理的
3.官方給出的一幅圖
4.安裝谷歌devtools插件
5.使用Mutations
五、vuex的核心概念
1.State，單一狀態樹
2.Getters（類似于計算屬性computed）
3.Mutation（vuex的 store狀態的更新唯一方式:提交 Mutation）
4.Actions
5.Module
六、項目結構
一、概念
1.什么是vuex？
? ? 官方解釋：Vuex是一個專為Vue.js應用程序開發的狀態管理模式。
? ? 它采用集中式存儲管理應用的所有組件的狀態，并以相應的規則保證狀態以一種可預測的方式發生變化。
? ? Vuex也集成到Vue的官方調試工具devtools?extension，提供了諸如零配置的time-travel調試、狀態快照導入導出等高級調試功能。
2.狀態管理到底是什么?
?? ?狀態管理模式、集中式存儲管理這些名詞聽起來就非常高大上,讓人捉摸不透。
?? ?其實,你可以簡單的將其看成把需要多個組件共享的變量全部存儲在一個對象里面。
?? ?然后,將這個對象放在頂層的Vue實例中,讓其他組件可以使用。
?? ?那么,多個組件是不是就可以共享這個對象中的所有變量屬性了呢?
3.等等,如果是這樣的話,為什么官方還要專門出一個插件Vuex呢?難道我們不能自己封裝個對象來管理嗎?
?? ?當然可以,只是我們要先想想 Vuejs帯給我們最大的便利是什么呢?沒錯,就是響應式。
?? ?如果你自己封裝實現一個對象能不能保證它里面所有的屬性做到響應式呢?當然也可以,只是自己封裝可能稍微麻頻一些。
?? ?不用杯疑,Vuex就是為了提供這樣一個在多個組件間共享狀態的插件,用它就可以了。
4.管理什么狀態呢？
?? ?但是,有什么狀態時需要我們在多個組件間共享的呢?
?? ?如果你做過大型開發,你一定遇到過多個狀態,在多個界面間的共享問題。
?? ?比如用戶的登錄狀態、用戶名稱、頭像、地理位置信息等等。
?? ?比如商品的收藏、購物車中的物品等等。
?? ?這些狀態信息,我們都可以放在統一的地方,對它進行保存和管理,而且它們還是響應式的(待會兒我們就可以看到代碼了,莫著急)。
二、.單界面的狀態管理
?
這圖片中的三種東西，怎么理解呢？? ?
? ? State：不用多說，就是我們的狀態。（你姑且可以當做就是data中的屬性）
? ? View：視圖層，可以針對State的變化，顯示不同的信息。
? ? Actions：這里的Actions主要是用戶的各種操作：點擊、輸入等等，會導致狀態的改變。
例如，下面的例子一定會實現吧：
?
?
三、多界面的狀態管理-vuex。
1.安裝vuex
npm?install?vuex --save
2.vuex是如何實現多界面狀態管理的
vue已經幫我們做好了單個界面的狀態管理,但是如果是多個界面呢?
?? ?口多個組件都依賴同一個狀態(一個狀態改了,多個界面需要進行更新)
?? ?口不同界面的 Actions都想修改同一個狀態( Home.vue需要修改, Profile.vue也需要修改這個狀態)
也就是說對于某些狀態(狀態1/狀態2/狀態3)來說只屬于我們某一個組件,但是也有一些狀態(狀態a/狀態b/狀態c)屬于多個組件共同想要維護的
?? ?口狀態1/狀態2/狀態3你放在自己的房間中,你自己管理自己用,沒問題
?? ?口但是狀態a/狀態b/狀態c我們希望交給一個大管家來統·幫助我們管理!!!
?? ?口沒錯,vuex就是為我們提供這個大管家的工具
全局單例模式(大管家)
?? ?口我們現在要做的就是將共享的狀態抽取出來,交給我們的大管家,統一進行管理。
?? ?口之后,你們毎個組件,按照我規癥好的規定,進行訪問和修改等操作。
?? ?口這就是vuex背后的基本思想
3.官方給出的一幅圖
devtools：瀏覽器插件，可以幫助記錄修改之后state的狀態。
修改state只有通過Mutations修改才能進行跟蹤！直接修改state雖然也能改但是無法跟蹤（$store.state.count++）
Actions：做異步操作使用Actions；Mutations只能處理同步操作。
?
4.安裝谷歌devtools插件
?
5.使用Mutations
export default new Vuex.Store({
??state: {
?????count: 100
??},
??mutations: {
?????// 方法，只有使用這個修改數值，才能監控到state的變化
?????increment(state) {
??????????state.count ++
?????},
?????decrement(state) {
??????????state.count --
?????}
??}
})
調用mutations中的方法修改state：
this.$store.commit('increment')
獲取state數據：
$store.state.count
?
?
五、vuex的核心概念
1.State，單一狀態樹
定義：
??state: {
?????count: 100
??}
使用：
$store.state.count
vuex提出使用單一狀態樹什么是單一狀態樹呢?
?? ?口英文名稱是 Single Source of Truth,也可以翻譯成單一數據源
但是,它是什么呢?我們來看個生活中的例子。
?? ?口OK,我用個生活中的例子做一個簡單的類比。
?? ?口我們知道,在國內我們有很多的信息需要被記錄,比如上學時的個人檔案,工作后的社保記錄,公積金記錄,結婚后的婚姻信息,以及其他相關的戶口、醫療、文憑、房產記錄等等(還有很多信息)。
?? ?口這些信息被分散在很多地方進行管理,有天你需要辦某個業務時(比如入戶某個城市),你會發現你需要到各個對應的工作地點去打印、蓋章各種資料信息,最后到個地方提交證明你的信息無誤。
?? ?口這種保存信息的方案,不僅僅低效,而且不方便管理,以及日后的維護也是一個龐大的工作(需要大量的各個部門的人力來維護,當然國家目前已經在完普我們的這個系統了)。
這個和我們在應用開發中比較類似
?? ?口如果你的狀態信息是保存到多個 Store對象中的,那么之后的管理和維護等等都會變得特別困難。
?? ?口所以Vuex也使用了單一狀態樹來管理應用層級的全部狀態。
?? ?口單狀態樹夠讓我們最直接的方式找到某個狀態的片段,而且在之后的維護和調試過程中,也可以非常方便的管理和維護。
2.Getters（類似于計算屬性computed）
（1）getters基本使用
?
（2）getters中使用getters：
?
（3）獲取getters中的方法
{{$store.getters.countDouble}}
（4）getters傳參
??getters: {
?????countDouble(state) {
??????????return state.count * 2
?????},
?????mutaByMe(state){
??????????// 返回一個函數，可以使用箭頭函數，并且只有一行的話默認就是返回值，并不推薦寫的太簡潔，因為可讀性很差
//????????return function(ct) {
//????????????return state.count * ct
//????????}
??????????????return ct => state.count * ct
?????}
??}
使用：
????<h2>{{$store.state.count * 2}}</h2>
????<h2>{{$store.getters.countDouble}}</h2>
????<h2>{{$store.getters.mutaByMe(5)}}</h2>
?
3.Mutation（vuex的 store狀態的更新唯一方式:提交 Mutation）
（1）Mutation主要包括兩部分:
?? ?口字符串的事件類型(type)
?? ?口一個回調函數( handler),該回調函數的第一個參數就是 state。
（2）Mutation基本使用
?
（3）Mutation傳參（多個參數的話，可以封裝到一個對象中）
??mutations: {
?????// 方法，只有使用這個才能監控到state的變化
?????add5(state, ct){//?payload負載
??????????state.count = state.count + ct
?????}
??}
this.$store.commit('add5', ct)
?
（4）Mutation提交風格
上面通過commit進行的提交是一種普通的方式。
Vue還提供了另外一種風格，它是一個包含type屬性的對象
?
Mutation中的處理方式是將整個commit的對象作為payload使用，所以代碼沒有改變，依然如下：
?
此時獲取的payload就是commit里面的完整對象。
（5）Mutation響應規則
Vuex的 store中的 state是響應式的,當 state中的數據發生改變時,Vue組件會自動更新。
定義在state中的屬性都被會加入到響應式系統中，而響應式系統會監聽屬性的變化，當屬性發生變化時，會通知所有界面中用到該屬性的地方，讓界面發生刷新。
這就要求我們必須遵守一些Vuex對應的規則:
?? ?口提前在 store中初始化好所需的屬性（store中對象已經定義好的屬性是可以實現響應式的）
?? ?口當給 state中的對象添加新屬性時,使用下面的方式方式
?? ?? ? 方式一:使用 Vue.set(obj, 'newProp',123)
?? ??? ?方式二:用新對象給舊對象重新賦值
例如：
1.在state中定義info: {'name':'zs', 'age': 15}。
2.直接在Mutation中修改屬性值是可以實現響應式的
state.info.name = 'ls'
3.這樣新增屬性值是做不到響應式的：
state.info['address'] = '山東'
4.新增屬性需要這樣做，才能實現新屬性的響應式：
Vue.set(state.info, 'address', '山東')
5.刪除屬性這樣做也不是響應式：
delete state.info.age
6.刪除屬性這樣做才是響應式：
Vue.delete(state.info, 'age')
7.直接將state中完整的對象重新賦值也可以實現響應式
state.info = {xxxx}
（6）Mutation類型常量
我們來考慮下面的問題:
?? ?口在 mutation中，我們定義了很多事件類型(也就是其中的方法名稱)
?? ?口當我們的項目增大時,Vuex管理的狀態越來越多,需要更新狀態的情況越來越多,那么意味著 Mutation中的方法越來越多
?? ?口方法過多,使用者需要花費大量的精力去記住這些方法,甚至是多個文件間來回切換查看方法名稱,甚至如果不是復制的時候可能還會出現寫錯的情況?
（7）Mutation同步代碼
通常情況下,Vuex要求我們 Mutation中的方法必須是同步方法
?? ?口主要的原因是當我們使用 devtools時,可以 devtools可以幫助我們捕捉 mutation的快照
?? ?口但是如果是異步操作,那么 devtools將不能很好的追蹤這個操作什么時候會被完成
所以，不要在Mutation中進行任何異步操作。
?
4.Actions
（1）定義actions（其中需要調用mutations方法進行參數的修改，具體參照官網的圖）
??actions: {
??????// context 上下文
??????aUpdateInfo(context){
????????????setTimeout(() => {
??????????????????context.commit(INCREAMENT)
????????????}, 1000)
??????}
??}
（2）使用action
this.$store.dispatch('aUpdateInfo')
（3）傳參參考mutations
（4）異步回調
?
?
5.Module
（1）Module是模塊的意思,為什么在Vuex中我們要使用模塊呢
?? ?口Vue使用單一狀態樹，那么也意味著很多狀態都會交給Vuex來管理
?? ?口當應用變得非常復雜時,store對象就有可能變得相當臃腫
?? ?口為了解決這個問題Vuex允許我們將 store分割成模塊( Module),而每個模塊擁有自己的 state、 mutation、action、 getters等
?
（2）上面的代碼中，我們已經有了整體的組織結構，下面我們來看看具體的局部模塊中的代碼如何書寫。
? ? 我們在moduleA中添加state、mutations、getters
? ? mutation和getters接收的第一個參數是局部狀態對象
?
?
六、項目結構
?
總結
以上是生活随笔為你收集整理的Vuex-全局状态集中式管理神器，做vue项目不知道Vuex真的out了的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 什么是Promise？前端开发人员会使用
- 下一篇： vue如何发送网络请求，使用axios事