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

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

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

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

var

vm

=

new

Vue({

el:

'#app',

store,

});

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

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

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

...mapState({

xm:

"name",

xb:"gender",

nl:

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

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

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

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

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

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

this.$store.dispatch()

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