image.png
每一個 Vuex 應用的核心就是 store（倉庫）。
“store”基本上就是一個容器，它包含著你的應用中大部分的狀態(tài) (state)颠放。
Vuex 和單純的全局對象有以下兩點不同：
1. Vuex 的狀態(tài)存儲是響應式的。
2. 不能直接改變 store 中的狀態(tài)阶冈。改變 store 中的狀態(tài)的唯一途徑就是顯式地提交 (commit) mutation傻谁。這樣使得我們可以方便地跟蹤每一個狀態(tài)的變化
首先創(chuàng)建創(chuàng)建一個 store。創(chuàng)建包含state和mutations：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
}
})
然后可以通過 store.state 來獲取狀態(tài)對象,通過 store.commit 方法觸發(fā)狀態(tài)可以變更瘫证。
store.commit('increment')
console.log(store.state.count) // -> 1
一、項目結構
image.png
1.應用層級的狀態(tài)應該集中到單個 store 對象中庄撮。
2.提交 mutation 是更改狀態(tài)的唯一方法背捌，并且這個過程是同步的。
3.異步邏輯都應該封裝到 action 里面洞斯。
二毡庆、模塊組件
1.State
在vuex中獲取vuex,由于vuex的狀態(tài)存儲是響應式的，所以可以通過計算屬性來獲取state
// 創(chuàng)建一個 Counter 組件
const Counter = {
template: `<div>{{ count }}</div>`,
computed: {
count () {
return store.state.count
}
}
}
每當 store.state.count 變化的時候, 都會重新求取計算屬性烙如，并且觸發(fā)更新相關聯(lián)的 DOM么抗。
通過在根實例中注冊 store 選項，該 store 實例會注入到根組件下的所有子組件中亚铁，且子組件能通過 this.$store 訪問到蝇刀。
const Counter = {
template: `<div>{{ count }}</div>`,
computed: {
count () {
return this.$store.state.count
}
}
}
mapState:
當一個組件需要獲取多個狀態(tài)的時候，將這些狀態(tài)都聲明為計算屬性會有些重復和冗余徘溢。為了解決這個問題吞琐，我們可以使用 mapState 輔助函數(shù)幫助我們生成計算屬性.
