Day 17：异步行动，同步变动－Vuex Actions、Mutations

Vuex 是个处理全域资料的状态管理库，采集中式管理方式，方便任何元件都能从中获取状态或触发事件，实作上通常用来存储 API 资料後再加以应用，尤其适合应用於开发中大型专案。

一图以蔽之：

（图片来源：Vuex - What is Vuex?）

Vuex 主要以四个核心概念——State、Getters、Mutations、Actions——所组成，另外包含 Modules 可再进行模组化。依循图片的运行流程大致如下：

原则上整个流程为单向循环，不可逆向，尽量避免越级（若遇处理同步或非同步问题时，也会有略过 action 直接呼叫 mutation 的情形发生）。

处理非同步执行程序
需透过提交 mutation 才能改变 state
使用 dispatch 呼叫 action：回传值为 promise
dispatch(type: string, payload?: any, options?: Object): Promise<any>
```
store.dispatch('fetchBookList', amount: 10)
```
action 函式第一个参数为 context，第二个可选参数为 payload
- context 物件包含：state、rootState、commit、dispatch、getters、rootGetters
```
actions: {
	fetchBookList (context) {
		context.commit('bookList', books) // 相当於 store.commit()
	}
}
```
- 可利用 ES6 参数解构（argument destructuring）简化程序码：
```
actions: {
	fetchBookList ({ commit }) {
		commit('bookList', books) // 相当於 store.commit()
	}
}
```

处理同步执行程序
唯一可以改变 state 的方法，且单纯只将结果直送并赋值给 state
使用 commit 呼叫 mutation
commit(type: string, payload?: any, options?: Object)
```
store.commit('bookList', books)
```

mutation 函式第一个参数为 state，第二个可选参数为 payload

mutations: {
    bookList(state, books) {
        state.bookList = books;
    },
},

第三个可选参数（options?: Object）若设定为 { root: true }，便能取得命名模组（namespaced modules）中的 root actions 或 root mutations。
payload 作为额外参数，通常会使用物件型别以包含多组资料而易於阅读；
若是以物件形式呼叫 commit／dispatch，则整个物件会作为 payload 传递给 mutation／action
```
store.commit({
  type: 'bookList',
  data: books
})
```
```
mutations: {
    bookList(state, payload) {
        state.bookList = payload.data;
    },
}
```