Vuex。它發音為“vewks”還是“veweks”？或者它的意思是“vew”，用法語風格的沉默“x”發音？
我對理解Vuex的麻煩只是從名字開始。
作為一名渴望的Vue開發者，我已經足夠的聽說Vuex懷疑它必須是Vue生態系統的重要組成部分，即使我不知道它是什麼。
我最終有足夠的想知道，所以我去了一個簡短的瀏覽計劃的文件; 只是為了得到這個想法。
令我懊惱的是，我遇到了一些陌生的術語，如“國家管理模式”，“全球單身人士”和“真相之源”。對於那些已經熟悉這個概念的人來說，這些術語可能是有意義的，但對我而言，他們根本就沒有凝膠。
但我得到的一件事是，Vuex與Flux和Redux有關。我不知道那些是什麼，但我認為如果我先調查它們可能會有所幫助。
經過一番研究和堅持，術語背後的概念終於開始在我的腦海中實現。我正在得到它。我回到了Vuex文檔，它終於打到了我...... Vuex嚇壞了！
我仍然不確定如何發音，但Vuex已經成為我Vue.js工具欄中的一個重要部分。我認為這也是值得你花時間檢查出來的，所以我在Vuex上寫了這本入門書，為你提供我希望的背景。
理解Vuex解決的問題
要了解Vuex，如果您第一次瞭解它旨在解決的問題，就會更容易。
想象一下，你已經開發了一個多用戶聊天應用程序。該界面包含用戶列表，私人聊天窗口，聊天記錄的聊天室和通知欄，以通知用戶未閱讀的其他用戶的未讀消息。
數百萬用戶每天都通過您的應用與數百萬其他用戶聊天。然而，有人抱怨一個惱人的問題：通知欄偶爾會給出錯誤的通知。用戶將收到一條新的未讀消息的通知，但是當他們檢查並查看它是什麼時，這只是他們已經看到的消息。
我所描述的是幾年前Facebook開發人員使用其聊天系統的真實場景。解決這個問題的過程激勵了他們的開發人員創建了一個名為“Flux”的應用程序架構。Flux是Vuex，Redux和其他類似庫的基礎。
助焊劑
一段時間以來，Facebook開發者一直在努力解決“殭屍通知”問題。他們最終意識到它的持久性不僅僅是一個簡單的bug，它指出了應用程序體系結構中的一些潛在缺陷。
摘要中最容易理解這個缺陷：當共享數據的應用程序中有多個組件時，其互連的複雜性將增加到數據狀態不再可預測或可理解的程度。相應地，應用程序變得無法擴展或維護。
Flux的想法是創建一套指導原則，描述可充分減輕這一缺陷的可擴展前端架構。不僅適用於聊天應用程序，還適用於任何具有組件和共享數據狀態的複雜UI應用程序。
流量是一種模式，而不是圖書館。
你不能去Github並下載Flux。這是一種像MVC這樣的設計模式。像Vuex和Redux這樣的庫實現Flux模式的方式與其他框架實現MVC模式的方式相同。
事實上，Vuex並沒有實現所有的Flux，只是一個子集。不過，現在不要擔心，我們應該關注於理解它所遵循的關鍵原則。
原則＃1：真相的單一來源
組件可能只有他們需要知道的本地數據。例如，用戶列表組件中滾動條的位置可能對其他組件不感興趣。
但是任何要在組件之間共享的數據（即應用程序數據）需要保存在一個地方，與使用它的組件分開。這個單一的位置被稱為“商店”。組件必須從此位置讀取應用程序數據，而不是保留其自己的副本以防止衝突或不一致。
// Instantiate our Vuex store
const store = new Vuex.Store({
// "State" is the application data your components
// will subscribe to
state: {
myValue: 0
}
});
// Components access state from their computed properties
const MyComponent = {
template: `
`,computed: {
myValue () {
return store.state.myValue;
}
}
};
原則＃2：數據是隻讀的
組件可以自由地從商店中讀取數據。但他們不能改變商店中的數據，至少不能直接改變數據。
相反，他們必須通知商店他們改變數據的意圖，商店將負責通過一組名為“突變”的已定義函數進行這些更改。
為什麼這種方法？如果我們集中數據改變邏輯，而不是在狀態不一致的情況下不需要遠看。我們正在最小化一些隨機組件（可能在第三方模塊中）以意想不到的方式改變數據的可能性。
const store = new Vuex.Store({
state: {
myValue: 0
},
mutations: {
increment (state, value) {
state.myValue += value;
}
}
});
// Need to update a value?
// Wrong! Don't directly change a store value.
store.myValue += 10;
// Right! Call the appropriate mutation.
store.commit('increment', 10);
原則＃3：突變是同步的
調試應用程序中實現上述兩個原則的應用程序中的數據不一致性要容易得多。您可以記錄提交併觀察狀態如何響應（在Vue Devtools中使用Vuex時確實可以做到這一點）。
但是，如果我們的突變異步應用，這種能力會受到損害。我們會知道我們提交的訂單的順序，但我們不知道我們的組件承諾的順序。
同步突變確保狀態不依賴於不可預測事件的順序和時間。
最後：什麼是Vuex？
有了這些背景，我們終於可以解決這個問題。Vuex是一個庫，可幫助您在Vue應用程序中實現Flux體系結構。通過執行上述原則，即使在多個組件之間共享數據時，Vuex仍可使您的應用程序數據保持透明且可預測的狀態。
它的實現包括一個商店，自定義的mutators，它會被動地更新從商店中讀取數據的任何組件。
它還支持很酷的開發功能，如熱模塊重新加載（在正在運行的應用程序中更新模塊）以及時間旅行調試（通過突變回溯到跟蹤錯誤）。
聽起來很酷。我有一些疑問…
也許你現在想知道你的應用程序是否需要Vuex，它是如何與vue-devtools集成的，或者你如何從異步函數提交數據。我在這篇文章中的目標只是給你一個關於Vuex的入門書。我希望你會發現，如果你現在閱讀文檔，你會感覺自己很好地得到這些答案。
閱讀更多 空空教你玩黑客 的文章
