Vuex 起步

所有 Vuex 應(yīng)用的中心就是 store（狀態(tài)存儲(chǔ)）。”store” 本質(zhì)上是一個(gè)保存應(yīng)用狀態(tài)的容器。這里有兩件要點(diǎn)，讓 Vuex store 區(qū)別于普通全局對(duì)象：

1. Vuex store 是響應(yīng)式的。當(dāng) Vue 組件從 store 讀取狀態(tài)，如果 store 中的狀態(tài)更新，它們也會(huì)高效地響應(yīng)更新。

2. 你不能直接更改 store 中的狀態(tài)。更改狀態(tài)的唯一的方法就是顯式 提交更改 (committing mutations)。這樣可以確保每次狀態(tài)更改都留有可追蹤的記錄，并且可以使用工具幫助我們更好地理解我們的應(yīng)用。

最簡單的 Store

NOTE: 我們將會(huì)在以后的示例代碼中使用 ES2015 語法。如果你還沒有用過，你應(yīng)該看看！

安裝 Vuex 之后，我們來創(chuàng)建一個(gè) store。這是一個(gè)非常易懂的例子 - 只含有一個(gè)初始化狀態(tài)對(duì)象，以及一些更改：

// 如果使用模塊系統(tǒ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

再次說明，我們提交 mutation 而不是直接更改 store.state.count，是想要顯式地追蹤它。這個(gè)簡單的轉(zhuǎn)換使你的意圖更加明顯。當(dāng)你閱讀代碼時(shí)，可以更好地了解應(yīng)用中的狀態(tài)更改。另外，這也讓我們有機(jī)會(huì)去實(shí)現(xiàn)一些工具，記錄修改日志、保存狀態(tài)快照、甚至是進(jìn)行基于時(shí)間軸的調(diào)試。

因?yàn)?store 的狀態(tài)是響應(yīng)式的，要在組件中使用 store 的狀態(tài)，只需在 computed 屬性中返回 store 的狀態(tài)就行。而觸發(fā)狀態(tài)改變可以簡單的理解為在組件方法中提交 mutation。

這是一個(gè) 最基本的 Vuex 計(jì)數(shù)應(yīng)用 的例子。

接下來，我們將在更多的細(xì)微細(xì)節(jié)中討論每個(gè)核心思想，讓我們從 State 開始吧。