什么是Vuex？
???? 首先Vuex 是Vue '全家桶'的成員之一，也是一個專為Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式。
????官方說法： 它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化。
為什么要用Vuex？
????因為組件之間是相互獨立的，組件之間想要通信。其中有通過props選項通信，但這只限于父子組件通信，遠(yuǎn)遠(yuǎn)不能滿足組件之間通信的需求，特別是做中大型的項目。所以就把組件之間需要共享的數(shù)據(jù)給單獨'弄'出來。
????通過定義和隔離狀態(tài)管理中的各種概念并通過強(qiáng)制規(guī)則維持視圖和狀態(tài)間的獨立性，我們的代碼將會變得更結(jié)構(gòu)化且易維護(hù)。
什么情況應(yīng)該用Vuex？
????Vuex可以幫助我們管理共享狀態(tài)，并附帶了更多的概念和框架，這需要對短期和長期效益進(jìn)行權(quán)衡。
????如果不是開發(fā)中大型單頁應(yīng)用，使用Vuex可能是繁瑣冗余的，不建議使用。
Vuex的特性
????每一個 Vuex應(yīng)用的核心就是 store（倉庫）?！皊tore”基本上就是一個容器，它包含著你的應(yīng)用中大部分的狀態(tài) (state)。Vuex 和單純的全局對象有以下兩點不同：
Vuex 的狀態(tài)存儲是響應(yīng)式的。當(dāng) Vue 組件從 store 中讀取狀態(tài)的時候，若 store 中的狀態(tài)發(fā)生變化，那么相應(yīng)的組件也會相應(yīng)地得到高效更新。
你不能直接改變 store 中的狀態(tài)。改變 store 中的狀態(tài)的唯一途徑就是顯式地提交 (commit) mutation。這樣使得我們可以方便地跟蹤每一個狀態(tài)的變化，從而讓我們能夠?qū)崿F(xiàn)一些工具幫助我們更好地了解我們的應(yīng)用。
Vuex 的核心概念
???? state: ???? 把組件需要通信的數(shù)據(jù)定義在store 的state中。容器的狀態(tài)(響應(yīng)式數(shù)據(jù)，可以觸發(fā)視圖更新的數(shù)據(jù))。
舉例：
//如果在模塊化構(gòu)建系統(tǒng)中，請確保在開頭調(diào)用了 Vue.use(Vuex)
//視圖狀態(tài)倉庫中(超大的ViewModel，把需要跨組件通信的數(shù)據(jù)都放到這里)
const store = new Vuex.Store({
//容器狀態(tài)(響應(yīng)式數(shù)據(jù)，可以觸發(fā)視圖更新的數(shù)據(jù))
state: {
count: 0
},)
//在組件中通過計算屬性來獲取 store.state中的成員
Vue.component('component-b', {
template: `
<div>
componentB
<h1>{{count }}</h1>
</div>
`,
created () {
},
data () {
return {
}
},
computed: { //使用computed 來監(jiān)視count的變化，當(dāng)count的值一變化，就會調(diào)用computed的事件
count () {
return store.state.count
}
}
})
???? getter: ???? 就像計算屬性一樣，getter 的返回值會根據(jù)它的依賴被緩存起來，且只有當(dāng)它的依賴值發(fā)生了改變才會被重新計算。
舉例：
const store = new Vuex.Store({
state: {
todos: [
{ name: '小張',compoleted: true},
{ name: '小李',compoleted: false }
]
},
getters: {
compoletedTodos: state => { //getter 接受state作為其第一個參數(shù)
return state.todos.filter (todo => toto.compoleted)
}，
comTodosLength: ( state, getters) => { //getter 也可以接受其他的getter作為第二個參數(shù)
return getters.compoletedTodos.length
}
}
})
通過屬性訪問
store.getters.compoletedTodos
???? mutation:???? 它是更改Vuex的store中的狀態(tài)的唯一方法，非常類似于事件，每個mutation
都有一個字符串的事件類型type和一個回調(diào)函數(shù)handle。
舉例：
const store = new Vuex.Store({
state: {
count: 1
},
mutations: {
increment (state) {
// 變更狀態(tài)
state.count++
}
}
})
在組件中通過store.commit方法來觸發(fā)mutation
store.commit('increment ')
通過store.commit傳入額外的參數(shù)，即mutation的載荷(payload):
舉例：
方式一：
mutations: {
increment (state,n) {
state.count += n
}
}
store.commit('increment',10)
方式二： 載荷應(yīng)該是一個對象
mutations: {
increment (state,payload) {
state.count += payload.amount
}
}
store.commit('increment',{
amount: 10
})
方式三：對象風(fēng)格的提交方式，但是定義mutation函數(shù)保持不變
store.commit({
type:'increment',
amunt: 10
})
???? action: ???? action 類似于 mutation,但是不同的是：
-
action提交的是mutation,而不是直接變更狀態(tài)。 -
action可以包含任何異步操作
舉例：
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
},
actions: {
//action 函數(shù)接受一個與store實例具有相同方法和屬性的context對象
increment (context) {
context.commit('increment')
}
}
})
action 通過 store.dispatch 觸發(fā):
store.dispatch('increment')
action與mutation最大的不同是：mutation必須同步執(zhí)行，而action就不受約束，可以在action內(nèi)部執(zhí)行異步操作：
actions: {
incrementAsync ({ commit }) {
setTimeout(() => {
commit('increment')
}, 1000)
}
}
action支持同樣的載荷方式和對象方式進(jìn)行分發(fā)。
???? module：???? 當(dāng)項目非常大的時候，應(yīng)用的所有狀態(tài)會集中到一個比較大的對象，store對象就有可能變得相當(dāng)臃腫。
????為了解決以上問題，我們可以將store分割成模塊，同時每個模塊擁有自己的state,mutation,action,getter,還能嵌套子模塊，從上至下進(jìn)行同樣方式的分割。
const moduleA = {
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
}
const moduleB = {
state: { ... },
mutations: { ... },
actions: { ... }
}
const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
})
store.state.a // -> moduleA 的狀態(tài)
store.state.b // -> moduleB 的狀態(tài)
輔助函數(shù)
-
mapState輔助函數(shù) -
mapGetters輔助函數(shù) -
mapMutations輔助函數(shù) -
mapActions輔助函數(shù)
