在vuex出現之前，vue中的狀態屬於‘單向數據流’。以官方網站為例:
新Vue（{//state
data（）{ return { count:0
}
}，//視圖
模板:` & ltdiv & gt{ { count } } & lt/div ` ，//操作
方法:{
increment（）{ this . count++
}
}
})12345678910111213141516
在…之中
狀態是壹個數據源。
視圖以聲明方式將狀態映射到視圖。
動作改變狀態以響應視圖上的用戶輸入。
但是解決不了？多個組件* * *享有地位。
於是vuex應運而生。
簡單來說，* * *享有的狀態存儲在state中，狀態由突變操作，但需要store.commit來主動操作突變。
讓我們分別介紹狀態、getters、突變、動作和模塊。
狀態
單壹狀態樹？
Vuex使用單個狀態樹，因此壹個對象可以包含所有應用程序級狀態。所以狀態被用作數據源。？
如何獲取組件中vuex的狀態？？
由於vuex的狀態存儲是響應式的，因此從存儲實例讀取狀態的最簡單方法是使用計算屬性返回狀態:
這是store/state.js中聲明的數據源嗎？
這是組件中的引用嗎？
但是，應該註意的是，在組件中進行引用之前，需要將其註入到starter文件中。
即:？
如果沒有在根實例中註冊store選項，則需要在每個使用state的組件中導入它。
註冊後，子組件只需要這個。$store呼叫vuex。
吸氣劑
有時候我們需要從狀態中派生出壹些狀態，比如過濾壹組列表，過濾後的數據還有其他組件可以使用。然後我們需要包裝這個結果，形成* * *享受狀態。？
例如:
計算值:{
donetodoccount（）{
歸還這個。$ store . state . todos . filter（todo = & gt；todo.done）。長度
}
}12345
如果這個長度被其他組件使用，如何做到這壹點？
Getter應運而生。
getters
donetodoccount:state = & gt；{
return state . todos . filter（todo = & gt；todo.done）。長度
}
}12345
Getters作為store.getters對象公開。
因此很容易在任何組件中使用它:
計算值:{
donetodoccount（）{
歸還這個。$ store . getters . donetodoccount
}
}12345
這是getters.js
這是組件中的引用嗎？
突變
改變Vuex商店狀態的唯壹方法是提交突變。？
Vuex中的突變就像壹個事件:每個突變都有壹個字符串和回調函數的事件類型。這個回調函數接受state作為第壹個參數。
但是我們不能直接調用突變的處理程序。要喚醒突變處理程序，您需要調用相應類型的store.commit方法。
這是在mutations.js中註冊的壹些事件
這是組件中觸發此事件的內容嗎？
當然，我們註意到壹個額外的參數可以在突變中傳遞，它被稱為突變的負載。？
在更多情況下，負載應該是壹個對象。這可以包含更多字段。
但是突變必須是同步函數。
那麽我們如何異步更新狀態呢？
答案是:行動
行動
動作類似於突變，除了:
動作提交突變，而不是直接更改狀態。
動作可以包含任何異步操作。
這也形成了行動-突變-狀態的過程。
Actions函數接受與store實例具有相同方法和屬性的上下文對象，因此您可以通過context.commit提交突變。但是如何觸發它呢？
答案:store.dispatch
模塊
使用單個狀態樹，應用程序的所有狀態都集中在壹個大對象中。因此，存儲對象往往會變得臃腫。
為了解決這個問題，Vuex允許我們將商店分成不同的模塊。每個模塊都有自己的存儲、變異、動作和獲取器。
項目結構
index.html├──
├──梅因網站
├── api
│ ?└-...#提取API請求├──組件
│ ?├──應用程序
│ ?└── ...└──商店
├──指數？#我們組裝模塊並將其出口到商店的地方
├──操作。js #根級操作
├──突變？#根級別的突變
└──模塊
├──。卡特。js？#購物車模塊
└──產品公司？#產品模塊1234567891011121314
總結:
Vuex可用於在單個頁面上的組件之間共享狀態。不適合跨頁交流。？
此外，對於壹些跨頁數據或關鍵數據，可以使用localStorage和sessionStorage。
閱讀全文