每一個(gè) Vuex 應(yīng)用的核心就是 store(倉庫)。"store" 基本上就是一個(gè)容器傻咖,它包含著你的應(yīng)用中大部分的狀態(tài)(state)痕慢。Vuex 和單純的全局對(duì)象有以下兩點(diǎn)不同:
Vuex 的狀態(tài)存儲(chǔ)是響應(yīng)式的。當(dāng) Vue 組件從 store 中讀取狀態(tài)的時(shí)候翠拣,若 store 中的狀態(tài)發(fā)生變化共耍,那么相應(yīng)的組件也會(huì)相應(yīng)地得到高效更新虑灰。
你不能直接改變 store 中的狀態(tài)。改變 store 中的狀態(tài)的唯一途徑就是顯式地提交(commit) mutations痹兜。這樣使得我們可以方便地跟蹤每一個(gè)狀態(tài)的變化穆咐,從而讓我們能夠?qū)崿F(xiàn)一些工具幫助我們更好地了解我們的應(yīng)用。
最簡單的 Store
提示:我們將在后續(xù)的文檔示例代碼中使用 ES2015 語法佃蚜。如果你還沒能掌握 ES2015庸娱,你得抓緊了!
安裝Vuex 之后谐算,讓我們來創(chuàng)建一個(gè) store熟尉。創(chuàng)建過程直截了當(dāng)——僅需要提供一個(gè)初始 state 對(duì)象和一些 mutations:
// 如果在模塊化構(gòu)建系統(tǒng)中,請(qǐng)確保在開頭調(diào)用了 Vue.use(Vuex)
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
}
})
現(xiàn)在洲脂,你可以通過store.state來獲取狀態(tài)對(duì)象斤儿,以及通過store.commit方法觸發(fā)狀態(tài)變更:
store.commit('increment')
console.log(store.state.count) // -> 1
再次強(qiáng)調(diào),我們通過提交 mutation 的方式恐锦,而非直接改變store.state.count往果,是因?yàn)槲覀兿胍鞔_地追蹤到狀態(tài)的變化。這個(gè)簡單的約定能夠讓你的意圖更加明顯一铅,這樣你在閱讀代碼的時(shí)候能更容易地解讀應(yīng)用內(nèi)部的狀態(tài)改變陕贮。此外,這樣也讓我們有機(jī)會(huì)去實(shí)現(xiàn)一些能記錄每次狀態(tài)改變潘飘,保存狀態(tài)快照的調(diào)試工具肮之。有了它,我們甚至可以實(shí)現(xiàn)如時(shí)間穿梭般的調(diào)試體驗(yàn)卜录。
由于 store 中的狀態(tài)是響應(yīng)式的戈擒,在組件中調(diào)用 store 中的狀態(tài)簡單到僅需要在計(jì)算屬性中返回即可。觸發(fā)變化也僅僅是在組件的 methods 中提交 mutations艰毒。
這是一個(gè)最基本的 Vuex 記數(shù)應(yīng)用示例筐高。
接下來,我們將會(huì)更深入地探討一些核心概念丑瞧。讓我們先從State概念開始柑土。