VueX狀態(tài)管理什么是Vuexvuex基礎(chǔ)stateVuex狀態(tài)管理模式mutationsgettersactionsmodulesdevtoolsplugins

vuex基礎(chǔ)什么是Vuex

Vuex是一個專為

Vue.js

應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化.Vuex

作用狀態(tài)管理-非父子通信緩存后端數(shù)據(jù)避免重復(fù)請求，影響用戶體驗時光旅行-調(diào)試什么是vuex安裝npminstallvuex--savesrc中創(chuàng)建store/index.js文件在store.js中導(dǎo)入vuex狀態(tài)管理庫

importVuefrom'vue’

importVuexfrom'vuex'Vue.use(Vuex)實例化并導(dǎo)出vuexExportdefaultnewVuex.Store({…})vuex基礎(chǔ)Vuex狀態(tài)管理模式使用步驟Vuex使用原理圖Vuex使用Vuex

的對象stateMutationsActionsGettersmodulespluginsdevtoolsVuex中的stateVuex的使用state:單一狀態(tài)樹

,每個應(yīng)用將僅僅包含一個

store

實例,vuex的基本數(shù)據(jù)，用來存儲變量。store/index.js定義state子組件template使用stateVuex中muationsVuex的使用提交更新state數(shù)據(jù)的方法，必須是同步的(如果需要異步使用action)。每個mutation都有一個字符串的事件類型(type)和一個回調(diào)函數(shù)(handler)。store/index.js定義mutations子組件template使用mutationsVuex中actionsVuex的使用

actions提交的是mutations，而不是直接變更狀態(tài),actions可以包含任意異步操作。store/index.js定義actions子組件template使用actionsVuex中g(shù)ettersVuex的使用store/index.js定義getters從基本數(shù)據(jù)(state)派生的數(shù)據(jù)，相當(dāng)于state的計算屬性,具有返回值的方法子組件template使用gettersVuex中modulesVuex的使用模塊化vuex，可以讓每一個模塊擁有自己的state、mutation、action、getters,使得結(jié)構(gòu)非常清晰，方便管理。store/index.js定義modules子組件template定義子模塊cart子組件template使用modules中的vuex對象Vuex中PluginsVuex的使用vuex

可以提供一些組件的使用，這個參數(shù)可以訂閱一個函數(shù)，讓這個函數(shù)在所有的mutations結(jié)束之后執(zhí)行。Devtools工具Vuex的使用工具包的安裝vue-devtools

工具包：/vuejs/vue-devtoolsDevtools的調(diào)試使用mapState,mapGetters,mapActions的使用Vuex的使用mapState,mapGette