《Vue.js 前端開發(fā)技術(shù)與實(shí)踐》課件-第10章 vuex狀態(tài)管理器

第10章vuex狀態(tài)管理器

什么是vuexVuex是一個(gè)專為Vue應(yīng)用程序開發(fā)的狀態(tài)（數(shù)據(jù)）管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)（數(shù)據(jù)）。每一個(gè)Vuex應(yīng)用的核心就是store（倉(cāng)庫(kù)），即響應(yīng)式容器，它用來定義應(yīng)用中數(shù)據(jù)以及數(shù)據(jù)處理工具。Vuex的狀態(tài)存儲(chǔ)是響應(yīng)式的，當(dāng)store中數(shù)據(jù)狀態(tài)發(fā)生變化，那么頁(yè)面中的store數(shù)據(jù)也發(fā)生相應(yīng)變化。改變store中的狀態(tài)的唯一途徑就是顯式地提交mutation，這樣可以方便地跟蹤每一個(gè)狀態(tài)的變化。Vuex的下載和安裝（1）下載vuex.js登錄下載地址/zh/installation.html，下載vuex.js存放在項(xiàng)目js文件夾之下。（2）引入在HTML頁(yè)面先引入Vue.js，后接著引入Vuex.js。<script

src="js/vue.js"></script><script

src="js/vuex.js"></script>在Vue.js之后引入vuex.js，vuex.js會(huì)進(jìn)行自動(dòng)安裝。Vuex基本使用（1）創(chuàng)建store實(shí)例通過new關(guān)鍵字實(shí)例化一個(gè)store實(shí)例，該實(shí)例是單一的狀態(tài)樹（數(shù)據(jù)倉(cāng)庫(kù)）。創(chuàng)建store實(shí)例語(yǔ)法：newVuex.store({state:{},//狀態(tài)，組件中需要共享使用的數(shù)據(jù)mutations:{},//改變狀態(tài)的唯一方式就是提交mutation，同步改變狀態(tài) getters:{},//類似計(jì)算屬性actions:{}//用于異步更新狀態(tài)})（2）將store實(shí)例注入到Vue根實(shí)例上

var

vm

=

new

Vue({

el:

'#app',

store,

});

通過在根實(shí)例中注冊(cè)store選項(xiàng)，該store實(shí)例會(huì)注入到根組件下的所有子組件中，且子組件能通過this.$store訪問到store中的數(shù)據(jù)。

Vuex配置選項(xiàng)1、state配置選項(xiàng)Vuex的狀態(tài)存儲(chǔ)是響應(yīng)式，即store中的狀態(tài)是響應(yīng)式的，在組件調(diào)用store中的狀態(tài)時(shí)僅需要在計(jì)算屬性中返回即可。通過“this.$store.state.key(字段名)”訪問到store中數(shù)據(jù)mapState輔助函數(shù)：當(dāng)一個(gè)組件需要獲取多個(gè)狀態(tài)時(shí)，將這些狀態(tài)都聲明為計(jì)算屬性有些麻煩，這時(shí)候可以使用mapState輔助函數(shù)來生成計(jì)算屬性。（1）數(shù)組寫法：…mapState([‘字段key’])例如：

...mapState(["name","gender","age"])（2）對(duì)象寫法：…mapState({自定名1:‘字段key’,……})例如：

...mapState({

xm:

"name",

xb:"gender",

nl:

"age"})在一個(gè)模塊化的打包系統(tǒng)中通過import{mapState}from“vuex”引入Vuex配置選項(xiàng)2、

getters配置選項(xiàng)有時(shí)候在數(shù)據(jù)使用前，需要進(jìn)行一些處理，即從store中派生出一些狀態(tài)（數(shù)據(jù)），Vuex在

store中定義“getter”選項(xiàng)（可以認(rèn)為是store的計(jì)算屬性），來派生出一些狀態(tài)。在組件中使用getters，通過“this.$store.getters.函數(shù)名”直接獲取，也可以通過輔助函數(shù)mapGetters。數(shù)組寫法：…mapgetteers([‘函數(shù)名’])對(duì)象寫法：…mapgetteers({key:‘函數(shù)名’})Vuex配置選項(xiàng)3、mutations配置選項(xiàng)需要修改store（倉(cāng)庫(kù)）中的數(shù)據(jù)，唯一途徑就是顯式地mommit提交mutation，mutation必須是同步函數(shù)。mutations:{

函數(shù)名（state,payload）{ //修改state的中的數(shù)據(jù)}在組件中提交Mutation方式：（1）this.$mit()提交this.$mit(‘函數(shù)名’,參數(shù)對(duì)象)（2）輔助函數(shù)mapMutations數(shù)組寫法：…mapMutations([‘函數(shù)名’])對(duì)象寫法：…mapMutations({key:’函數(shù)名’})Vuex配置選項(xiàng)4、

actions配置選項(xiàng)Action是異步修改state的數(shù)據(jù)。異步修改state也需要提交一個(gè)mutation，才能達(dá)到修改的目的。actions:{

函數(shù)名({commit},paload){ commit(‘mutation中的函數(shù)名’)}}在組件中分發(fā)Action方式：（1）在組件中使用

this.$store.dispatch()

分發(fā)actionthis.$store.dispatch(‘函數(shù)名’,參數(shù)對(duì)象)或使用包含type屬性的對(duì)象this.$store.dispatch({type:’函數(shù)名’,key