每個Vuex應(yīng)用的核心就是store(倉庫)卓箫÷窠В“store”基本上就是一個容器碘勉,它包含著你的應(yīng)用中大部分的狀態(tài)(state)巷挥。
Vuex和單純的全局對象有以下兩點不同:
1.Vuex的狀態(tài)存儲是響應(yīng)式的。當Vue組件從store中讀取狀態(tài)的時候验靡,若store中的狀態(tài)發(fā)生變化倍宾,那么相應(yīng)的組件也會相應(yīng)地得到高效更新。
2.你不能直接改變store中的狀態(tài)胜嗓。改變store中的狀態(tài)的唯一途徑就是顯式地提交(commit)mutation高职。
簡單創(chuàng)建使用示例
//如果在模塊化構(gòu)建系統(tǒng)中,要確保在開頭調(diào)用Vue.use(Vuex)
const store= new Vuex.Store({
state:{
count:0
},
mutations:{
addcount(state){
state.count++
}
}
})
通過store.state來獲取狀態(tài)對象辞州,以及通過store.commit方法觸發(fā)狀態(tài)變更:
store.commit('addcount')
console.log(store.state.count) //1
強調(diào)怔锌,通過提交mutation的方式,而非直接改變store.state.count,是因為想更明確地追蹤到狀態(tài)的變化孙技。
由于store中的狀態(tài)是響應(yīng)式的产禾,在組件中調(diào)用store中的狀態(tài)簡單到僅需要在計算屬性中返回即可。觸發(fā)變化也僅僅是在組件的methods中提交mutation牵啦。
本文來源vuex官網(wǎng)