摘要:我們通常稱之為狀態(tài)管理模式,用于解決組件間通信的以及多組件共享狀態(tài)等問題。創(chuàng)建指定命名空間的輔助函數(shù),總結的功能首先分為兩大類自己的實例使用為組件中使用便利而提供的輔助函數(shù)自己內部對數(shù)據(jù)狀態(tài)有兩種功能修改數(shù)據(jù)狀態(tài)異步同步。
what is Vuex ?
這句話我想每個搜索過Vuex官網(wǎng)文檔的人都看到過,
在學習源碼前,當然要有一些前提條件了。
了解Vuex的作用,以及他的使用場景。
會使用Vuex,對基本API熟練掌握。
有一顆求知的內心(balabla的)。
Vuex我們通常稱之為狀態(tài)管理模式,用于解決組件間通信的以及多組件共享狀態(tài)等問題。官網(wǎng)文檔中注明的場景十分影響框架開發(fā)的整體脈絡,也就是這個框架從一開始做就想解決這些問題,
Vuex的核心API有哪些?(=》 符號代之類比 ->符號代表 在vuex提供的輔助函數(shù))
state : 數(shù)據(jù)倉庫,所有的數(shù)據(jù)都存在這里。 =》 vue對象的data。
getters :可以搭配倉庫中的數(shù)據(jù)結合起來聯(lián)動相應的數(shù)據(jù) =》 vue的計算屬性 -> mapGetters
mutation :更新數(shù)據(jù)倉庫中的數(shù)據(jù) -> mapMutations
action :負責異步操作(網(wǎng)絡請求、定時器等內容)調用mutation來更新數(shù)據(jù) -> mapActions
modules : 模塊模式 提供了命名空間 使狀態(tài)管理支持了樹形結構。(畫重點)
把這些API分成倆大類:
負責向Vuex中輸入。
從Vuex中獲取數(shù)據(jù)使用。
action 與 mutation 解決了所有向Vuex更新數(shù)據(jù)的方式(同步與異步)。
getters 與 state 解決了vue組件(也可以是vuex內部)從Vuex獲取數(shù)據(jù)。
modules呢 當然不屬于這兩大類,它是一個基石,他讓Vuex有了樹形結構,
你可以將Vuex組織成一個模塊,每個模塊都有action、mutation、getters、state等方法。模塊之間有了父子關系。
以上這些都是針對于Vuex內部的一些方法,可以在Vuex的實例上使用。
Vuex的實例一般都會掛載到Vue對象上。
為了方便使用Vuex還提供了一組輔助函數(shù)
在使用Vue進行開發(fā)的時候,我們有大量的states、getters、mutations、actions要使用,每個都使用vuex實例去調用會浪費很多代碼,尤其是在使用了命名空間(namespaced)之后,vuex實例去調用這些方法都要加上對應的命名空間,所以就有了以下四個方法,接收一個namespace(可以為空),也就是命名空間前綴,以及一個對象、或者數(shù)組。
mapState 為組件創(chuàng)建計算屬性以返回 Vuex store 中的狀態(tài)。
mapGetters 為組件創(chuàng)建計算屬性以返回 getter 的返回值。
mapMutations 創(chuàng)建組件方法分發(fā) action。
mapActions 創(chuàng)建組件方法提交 mutation。
以上幾個方法都是為Vue組件遍歷使用而產(chǎn)生的。
但是還不夠極致,每個都要寫命名空間,
輔助函數(shù)還提供了createNamespacedHelpers。創(chuàng)建指定命名空間的輔助函數(shù),
Vuex的功能首先分為兩大類:
Vuex自己的實例使用 getters、mutations、actions
Vuex為組件中使用便利而提供的輔助函數(shù) mapGetters、mapMutations、mapActions、mapState、createNamespacedHelpers
Vuex自己內部對數(shù)據(jù)狀態(tài)(state)有兩種功能:
修改數(shù)據(jù)狀態(tài) action:異步 mutation : 同步。
獲取數(shù)據(jù)狀態(tài) getter : 可以經(jīng)過計算 state : 直接返回數(shù)據(jù)狀態(tài)。
Vuex支持的模式:模塊模式 modules,為Vuex提供樹形結構,以及命名空間,幫助Vuex層級分明。
下一章分析一下脈絡
我是一個應屆生,最近和朋友們維護了一個公眾號,內容是我們在從應屆生過渡到開發(fā)這一路所踩過的坑,已經(jīng)我們一步步學習的記錄,如果感興趣的朋友可以關注一下,一同加油~文章版權歸作者所有,未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/102768.html
摘要:各位看官沒看過功能梳理的可以先閱讀下源碼學習一功能梳理前車之鑒有了源碼學習的經(jīng)驗,每次看認真鉆研源代碼的時候都會抽出一小段時間來大體瀏覽一遍源代碼。大體了解這個源代碼的脈絡,每個階段做了什么,文件目錄的劃分。 各位看官 沒看過功能梳理的可以先閱讀下Vuex源碼學習(一)功能梳理. 前車之鑒 有了vue-router源碼學習的經(jīng)驗,每次看認真鉆研源代碼的時候都會抽出一小段時間來大體瀏覽一...
摘要:為了更清楚的理解它的原理和實現(xiàn),還是從源碼開始讀起吧。結構梳理先拋開,的主要源碼一共有三個文件,,初始化相關用到了和我們使用創(chuàng)建的實例并傳遞給的根組件。這個方法的第一個參數(shù)是構造器。的中,在保證單次調用的情況下,調用對構造器進入了注入。 原文鏈接 Vuex 作為 Vue 官方的狀態(tài)管理架構,借鑒了 Flux 的設計思想,在大型應用中可以理清應用狀態(tài)管理的邏輯。為了更清楚的理解它的原理和...
摘要:原文來自集前端最近很火的框架資源定時更新,歡迎一下。推送自己整理近期三波關于的資訊這里就拋磚引玉了,望有更屌的資源送助攻。 原文來自:集web前端最近很火的vue2框架資源;定時更新,歡迎Star一下。 推送自己整理近期三波關于Vue.js的資訊; 這里就拋磚引玉了,望有更屌的資源送助攻。 showImg(https://segmentfault.com/img/bVVeiZ); 第...
摘要:插件開發(fā)前端掘金作者原文地址譯者插件是為應用添加全局功能的一種強大而且簡單的方式。提供了與使用掌控異步前端掘金教你使用在行代碼內優(yōu)雅的實現(xiàn)文件分片斷點續(xù)傳。 Vue.js 插件開發(fā) - 前端 - 掘金作者:Joshua Bemenderfer原文地址: creating-custom-plugins譯者:jeneser Vue.js插件是為應用添加全局功能的一種強大而且簡單的方式。插....
摘要:平日學習接觸過的網(wǎng)站積累,以每月的形式發(fā)布。年以前看這個網(wǎng)址概況在線地址前端開發(fā)群月報提交原則技術文章新的為主。 平日學習接觸過的網(wǎng)站積累,以每月的形式發(fā)布。2017年以前看這個網(wǎng)址:http://www.kancloud.cn/jsfron... 概況 在線地址:http://www.kancloud.cn/jsfront/month/82796 JS前端開發(fā)群月報 提交原則: 技...
閱讀 2734·2021-09-02 15:11
閱讀 906·2019-08-26 18:18
閱讀 1867·2019-08-26 11:57
閱讀 3317·2019-08-23 16:59
閱讀 1994·2019-08-23 16:51
閱讀 2306·2019-08-23 16:11
閱讀 3120·2019-08-23 14:58
閱讀 1107·2019-08-23 11:34