Vuex簡(jiǎn)介
Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式
State: 驅(qū)動(dòng)應(yīng)用的數(shù)據(jù)源；
View: 以聲明方式將State映射到視圖；
Actions: 響應(yīng)在View上的用戶輸入導(dǎo)致的狀態(tài)變化。
每一個(gè) Vuex應(yīng)用的核心就是store（倉(cāng)庫(kù)）。"store"基本上就是一個(gè)容器，它包含著你的應(yīng)用中大部分的狀態(tài)(state)。Vuex和單純的全局對(duì)象有以下兩點(diǎn)不同：
- Vuex的state是響應(yīng)式的。當(dāng)Vue組件從store中讀取狀態(tài)的時(shí)候，若store中的state發(fā)生變化，那么相應(yīng)的組件也會(huì)相應(yīng)地得到高效更新。
- 你不能直接改變store中的狀態(tài)。改變store中的狀態(tài)的唯一途徑就是顯式地提交(commit) 轉(zhuǎn)變（ mutations ）。這樣使得我們可以方便地跟蹤每一個(gè)狀態(tài)的變化，從而讓我們能夠?qū)崿F(xiàn)一些工具幫助我們更好地了解我們的應(yīng)用。
什么時(shí)候使用vuex
雖然 Vuex 可以幫助我們管理共享狀態(tài)，但也附帶了更多的概念和框架。這需要對(duì)短期和長(zhǎng)期效益進(jìn)行權(quán)衡。一般如果不打算開發(fā)大型單頁(yè)應(yīng)用，使用Vuex可能是繁瑣冗余的，通過event-bus即可解決問題。
Vuex用法——state
state: {
todoList: [{
'todo': '待辦1',
'done': false
},
{
'todo': '待辦2',
'done': false
},
{
'todo': '待辦3',
'done': false
},
{
'todo': '待辦4',
'done': false
},
{
'todo': '待辦5',
'done': false
}]
}
可在組件中通過$store.state對(duì)象獲取數(shù)據(jù)
computed: {
todoList () {
return this.$store.state.todoList
}
}
還可以通過vuex提供的mapState方法獲取state數(shù)據(jù)
computed: {
...mapState(['todoList']),
todoUndo () {
return this.todoList.filter((todo) => {
return !todo.done
})
}
}
Vuex用法——getters
getters相當(dāng)于計(jì)算屬性，依賴于state和其他getters
getters: {
undos (state) {
return state.todoList.filter(todo => !todo.done)
}
}
可以通過vuex提供的mapGetters方法獲取getters數(shù)據(jù)
...mapGetters({
todoUndo: 'undos'
})
Vuex用法——mutations和actions
- mutations用于注冊(cè)一組修改state的同步事件；
- actions用于提交mutations事件，其中可包含較復(fù)雜的異步方法。
mutations: {
TODO_ADD (state, payload) {
state.todoList.push(payload.todo)
},
TODO_DONE (state, payload) {
state.todoList[payload.index].done = true
},
TODO_DEL (state, payload) {
state.todoList.splice(payload.index, 1)
}
},
actions: {
todoAdd ({ commit }, todo) {
commit({
type: 'TODO_ADD',
todo: todo,
done: todo.done
})
}
}
Vuex用法——modules
由于使用單一狀態(tài)樹，應(yīng)用的所有狀態(tài)會(huì)集中到一個(gè)比較大的對(duì)象。當(dāng)應(yīng)用變得非常復(fù)雜時(shí)，store對(duì)象就有可能變得相當(dāng)臃腫。
為了解決以上問題，Vuex 允許我們將store分割成模塊（module）。每個(gè)模塊擁有自己的state、mutation、action、getter、甚至是嵌套子模塊——從上至下進(jìn)行同樣方式的分割。
