[Vue] Vuex 是什麼? 怎麼用? — 統整、專案結構(5/5)
全系列共五篇：
一、[Vue] Vuex 是什麼? 怎麼用? — State、Mutations (1/5)
二、[Vue] Vuex 是什麼? 怎麼用? — Actions (2/5)
三、[Vue] Vuex 是什麼? 怎麼用? — Getters (3/5)
四、[Vue] Vuex 是什麼? 怎麼用? — Modules (4/5)
五、[Vue] Vuex 是什麼? 怎麼用? — 統整、專案結構(5/5)
Outline:
1. 總結 State、Mutations、Actions、Getters
2. 帶入參數與呼叫方法
3. 專案結構總結 State、Mutations、Actions、Getters
其實 Vuex 有一點像是一個全域的 component，大家可以拿他的資料，call 他出來用，當然是不一樣的東西，但是用很像 component 的角度來看，可能會比較好記憶一點。
State 就像是 data，Actions + Mutations 就像是 methods，Getters 就像是 computed：
複習一下官網的圖：
一句話總結 Vuex 動作流程的話，可以說是：
Component 使用 Dispatch 呼叫 Actions，讓 Actions 發出 commit 觸發 Mutations 去修改 State 的資料。
Dispatch 是呼叫 Actions，Commit 是呼叫 Mutations，很重要不能搞混了。
帶入參數及呼叫方法
另外在前面三篇都有講到 State、Mutations、Actions、Getters 各自可以帶入的參數和呼叫的方式，這邊也整理一下：
State
定義：
/store.js
使用：
/app.vue
mapState
定義：
/store.js
使用：
/app.vue
Getters
可帶參數：state, getters
定義：
/store.js
使用：
帶上參數 getters 表示可以呼叫別的 getters 來用：
定義：
/store.js
使用：
/app.vue
mapGetters
(定義跟上面的 store.js 一樣，就不重複了，主要差在 component 呼叫的時候)
使用：
Mutations
可帶參數： state, payload
使用：
/app.vue
methods: {
reverse() {
this.$store.commit("Loaded");
},
}With Payload：
通常 payload 可以用物件表示，就能更具描述性，但是要記得在 mutations 運算時裡面的 payload 要加上參數物件的 key，舉例：
/app.vue
store.commit('addCounts', {
amount: 10
})/store.js
mutations: {
addCounts (state, payload) {
state.count += payload.amount
}
}所以帶上 payload 的呼叫可以這樣使用：
this.$store.commit("addTimes",10);或this.$store.commit({
type: "addTimes",
count: 2
});
物件的 type 是必要的，其他的則可以隨意
mapMutations：
使用 mapMutations 的話，就要把 payload 直接帶入 template 中：
<button @click="addTimes(2)">addTimes</button>** mutations 一定只能執行同步，actions 才能執行非同步
Actions
可帶參數：context: { commit, dispatch, state, getters, rootState, roorGetters }, payload
Actions 可以執行非同步，Mutations 不可以，意思是
Axios 要在 Actions 裡面做，不可以在 Mutations 裡面做
定義：
/store.js
ClickedActions({ commit }, payload) {
commit('addTimes', payload)
}使用：
/app.vue
methods: {
add() {
this.$store.dispatch("ClickedActions",2);
}
}以上，就是大概整理了全部的參數和使用方法，接下來，該怎麼應用在專案上呢？
專案結構
Vuex 並不會嚴格限制專案的結構，但是有三大原則一定要遵守
- APP 層級的狀態要在 state 集中管理
APP 層級的狀態的意思是指不會因為跨組件改變的狀態，如登入者資訊、購物車清單...等，會因為跨組件改變的狀態可能是下拉式選單的開關狀態、商品列表...等2. 唯一改變 state 的方式只有 mutations，而且是同步執行
3. actions 才可以執行非同步
官網這邊給了一個結構的範例參考：
├── index.html
├── main.js
├── api
│ └── ... // 放後端 api
├── components // 頁面們
│ ├── App.vue
│ └── ...
└── store
├── index.js // 在這邊註冊modules並export store
├── actions.js // 跨組件的actions
├── mutations.js // 跨組件的mutations
└── modules
├── cart.js // 購物車 module
└── products.js // 商品 module也有一個購物車範例給大家參考
Vuex 的介紹與學習筆記目前就告一段落了，如果有任何地方遺漏或是疏失，希望可以不吝嗇給予指教，感恩感恩 🙇🙇🙇
內容若有任何錯誤，歡迎留言交流指教！ 🐬全系列共五篇：
一、[Vue] Vuex 是什麼? 怎麼用? — State、Mutations (1/5)
二、[Vue] Vuex 是什麼? 怎麼用? — Actions (2/5)
三、[Vue] Vuex 是什麼? 怎麼用? — Getters (3/5)
四、[Vue] Vuex 是什麼? 怎麼用? — Modules (4/5)
五、[Vue] Vuex 是什麼? 怎麼用? — 統整、專案結構(5/5)
