Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式股耽。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)扼劈,并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化。
State
完整的應(yīng)用數(shù)據(jù)中心,應(yīng)用的相關(guān)組件獲取數(shù)據(jù)或更新數(shù)據(jù),是整個(gè)應(yīng)用程序的唯一數(shù)據(jù)中心竞慢。
Store
只有外部組件不能直接對(duì)State進(jìn)行更改,數(shù)據(jù)中心管理員只能依靠dispatchaction(行為調(diào)度)或commitamutation(提交mutation)間接操作治泥。
Getters
Getters的本質(zhì)在于Vuexstore的computed屬性筹煮,讀取store/state的內(nèi)容,Getters中的數(shù)據(jù)將被緩存居夹,并且在數(shù)據(jù)更新時(shí)它所依賴的相關(guān)組件狀態(tài)也會(huì)及時(shí)更新败潦。
Mutations
當(dāng)在應(yīng)用程序中共享全局?jǐn)?shù)據(jù)狀態(tài)時(shí),由于數(shù)據(jù)變化可能來(lái)自任何組件准脂,因此難以定位和跟蹤數(shù)據(jù)的狀態(tài)劫扒。
所以Vuex建議用Mutations的方式改變數(shù)據(jù),而不是直接進(jìn)行修改狸膏,它的Vuedevtools工具非常精確地幫助我查找更改和修改的時(shí)間沟饥。
如果您使用過(guò)Redux,Mutations的概念與reducer非常相似,它的作用是改變數(shù)據(jù)狀態(tài)湾戳。
Actions
當(dāng)要執(zhí)行一個(gè)異步任務(wù)或多個(gè)相關(guān)Mutations來(lái)更新數(shù)據(jù)狀態(tài)時(shí)贤旷,我們需要Actions定義用于操作的函數(shù),其中的第一個(gè)參數(shù)context可以獲得相關(guān)屬性砾脑,commit和getters幼驶,從而便于組織定義更復(fù)雜的邏輯。Actions是我們常用的接口數(shù)據(jù)請(qǐng)求獲取數(shù)據(jù)韧衣,Actions經(jīng)常被使用盅藻。
以Store/State為結(jié)束,我們使用了Store/State來(lái)定義和管理應(yīng)用的核心數(shù)據(jù)畅铭,通過(guò)Compute屬性在組件中調(diào)用來(lái)自Getters的數(shù)據(jù)氏淑,如果我們要操縱數(shù)據(jù),我們可以調(diào)用注冊(cè)的Actions方法硕噩,然后Actions調(diào)用相關(guān)的mutations來(lái)對(duì)數(shù)據(jù)操作假残。