Vuex簡單入門
1.Vuex是什么？
學(xué)院派：Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式；集中存儲和管理應(yīng)用的所有組件狀態(tài)。
理解：以上這4個(gè)詞是我們理解的關(guān)鍵。狀態(tài)：什么是狀態(tài)，我們可以通俗的理解為數(shù)據(jù)。Vue只關(guān)心視圖層，那么視圖的狀態(tài)如何來確定？我們知道是通過數(shù)據(jù)驅(qū)動，這里的狀態(tài)管理可以簡單理解為管理數(shù)據(jù)。集中存儲：Vue只關(guān)心視圖，那么我們需要一個(gè)倉庫（Store）來存儲數(shù)據(jù)，而且是所有的數(shù)據(jù)集中存儲，視圖和數(shù)據(jù)就可以分析。管理：除了存儲，還可以管理數(shù)據(jù)，也就是計(jì)算、處理數(shù)據(jù)。所有組件狀態(tài)：所用的組件共用一個(gè)倉庫（Store），也就是一個(gè)項(xiàng)目只有一個(gè)數(shù)據(jù)源（區(qū)分模塊modules）。
總結(jié)：Vuex就是在一個(gè)項(xiàng)目中，提供唯一的管理數(shù)據(jù)源的倉庫。
2.有什么用？使用場景？
場景一：處理多組件依賴于同一個(gè)數(shù)據(jù)，例如有柱狀圖和條形圖兩個(gè)組件都是展示的同一數(shù)據(jù)；
場景二： 一個(gè)組件的行為——改變數(shù)據(jù)——影響另一個(gè)組件的視圖，其實(shí)也就是公用依賴的數(shù)據(jù)；
Vuex將組件公用數(shù)據(jù)抽離，在一個(gè)公共倉庫管理，使得各個(gè)組件容易獲取（getter）數(shù)據(jù)，也容易設(shè)置數(shù)據(jù)（setter）。
3.源碼初覽
這是Vuex的源碼文件，總共包含五大部分，Plugins兩個(gè)注入文件，核心文件index，幫組文檔helper，工具文件util.js
我們先看看Index.js文件export的框架，后面具體分析。
export default {
Store,
install,
mapState,
mapMutations,
mapGetters,
mapActions
}
后面文章分析Store倉庫。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了淺談Vue.set實(shí)際上是什么，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
vue使用多級彈窗(Dialog)出現(xiàn)蒙版遮罩問題及解決
這篇文章主要介紹了vue使用多級彈窗(Dialog)出現(xiàn)蒙版遮罩問題及解決方案,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02
vue 項(xiàng)目中使用websocket的正確姿勢
這篇文章主要介紹了vue 項(xiàng)目中使用websocket的實(shí)例代碼，通過實(shí)例代碼給大家介紹了在utils下新建websocket.js文件的方法,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-01-01
vue.js是一套構(gòu)建用戶界面的漸進(jìn)式框架，它采用自底向上增量開發(fā)的設(shè)計(jì).這篇文章主要介紹了VueJs 填坑日記之初識 *.Vue文件,需要的朋友可以參考下2017-11-11
在Vue中如何實(shí)現(xiàn)打字機(jī)的效果
這篇文章主要介紹了在Vue中如何實(shí)現(xiàn)打字機(jī)的效果，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
本篇文章主要介紹了Vue中保存用戶登錄狀態(tài)實(shí)例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。、2017-06-06
這篇文章主要介紹了VUE v-bind 數(shù)據(jù)綁定,簡單點(diǎn)來說就是對 HTML 中的元素，我們可以使用 v-bind 來進(jìn)行綁定和動態(tài)的數(shù)據(jù)輸出，本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-05-05
在 Vue 3 中,.sync 修飾符已經(jīng)被移除,在 Vue 2 中,.sync 修飾符是一個(gè)語法糖,用于簡化子組件和父組件之間的雙向數(shù)據(jù)綁定,那么本文將給大家介紹一下vue3中不支持.sync語法糖的解決方法,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
Vue-loader其實(shí)就是一個(gè)webpack的loader，用來把vue組件轉(zhuǎn)換成可部署的js, html, css模塊，這篇文章主要介紹了Vue-loader使用教程,需要的朋友可以參考下2022-08-08
vue中el-date-picker限制選擇7天內(nèi)&禁止內(nèi)框選擇
項(xiàng)目中需要選擇時(shí)間范圍,并且只能選擇當(dāng)前日期之后的七天,本文就來介紹了vue中el-date-picker限制選擇7天內(nèi)&禁止內(nèi)框選擇,具有一定的參考價(jià)值,感興趣的可以了解一下2023-12-12