Vuex的實現原理及使用詳細註解

問題1：在我們開發Vue項目中會涉及到一些狀態數據的管理，每個組件中都有不同的狀態數據，這個時候就會涉及到組件間的通信的問題：

解決方法：

1. props（父子之間通信）
2. PubSub（任意組件之間通信）
3. 自定義事件（主要還是父子之間通信）
4. 事件總線（任意組件之間通信）
5. 插槽（目前的話也是父子之間通信）
6. Vuex（任意組件之間通信）

---

問題2：Vuex實現原理以及使用詳細註解（如下圖所示）

原理詳解：（步驟對應上圖）

1. Vuex中的state,mutations,actions,getters它們都是對象
   - state:包含了多個狀態數據
   - mutations:包含了多個可以間接修改狀態數據的方法
   - actions:包含了多個可以間接修改狀態數據方法的對象
   - getters:包含了多個狀態數據的計算屬性的get操作的方法的對象
2. 這個時候就會涉及到在我們這個組件Vue Component 的內部如果想要獲取Vuex當中管理的狀態數據的值
   - 從state當中直接獲取，拿狀態數據有這麼倆種方式可以獲取：
   • 1-通過$store.state.xxx（xxx代表的就是屬性)
   • 2-mapState（[‘xxx’])xxx也是代表屬性
3. 如果我們要從組件Vue Component 的內部去修改Vuex當中管理的狀態數據的值
   • 我們可以通過組件內部去找actions，讓actions去找mutations，再通過mutations去修改狀態數據state這麼一個過程
4. 如果組件Vue Component 的內部想要找到對應的actions或者說想要找actions中對應的action
   • 1-可以通過$store.dispatch(‘xxx’)這個xxx對應的是方法名字
   • 2-可以通過map.Acitons([‘xxx’])xxx同上
     注意：
   • 如果組件Vue Component內部的方法名字和actions的方法名字重名了map.Acitons([xxx])直接寫xxx就行了。
   • 如果不重名倆個名字不一樣，這個時候我們可以在actions中map.Acitons([ ])中可以寫對象，鍵和值的關係
5. actions如果要去找到mutations中對應的mutation，要想修改這個狀態數據
   -在action內部用commit（‘xxx’)這裏的xxx對應的是mutation中對應的方法名字
6. mutations如果想要直接修改state，簡單粗暴，直接向state中傳state就可以了
7. 如果我想在組件內部去找到狀態數據的計算屬性的值，這個時候我們可以通過另外的倆種方式
   • $.store.getters.xxx
   • mapGetters([‘xxx’])
     通過這倆種方式我們可以直接得到getters中對應的屬性值（get操作的值）
8. 如果我們想要修改state這個狀態數據，但是不想通過actions這種方法，那麼我也可以直接去找到mutations方法如下
   • $store.commit(‘xxx’)這裏的xxx是mutation當中對應的方法名
   • mapMutations([‘xxx’])這裏需要注意的是，同名寫成對象鍵值對的形式，不同名就寫成數組
9. 在整個vuex中如果想要實時的檢測或者看到用戶做的操作到底是提交到了哪一個mutation這個state裏面當前的數據是什麼
   • 這個時候我們可以通過瀏覽器當中的一個插件Vue dev Tools
10. 一般情況下mutations中放的是同步的操作的方法
11. 出現異步操作的話，我們會把其放在actions中，其實異步或者同步都可以放
12. 如果我們想要在組件內部或者說通過vuex和後臺進行交互的話，這個時候我們用的是ajax的方式

總結：

• 如果說我界面要想發生變化，那麼一般情況下我們更改的是state狀態數據的值
• 如果說我們想更改狀態數據界面發生變化，使用了vuex，我們肯定是從Vue Component------找—>actions----action再去找-----mutations----mutations再去找----->(對應的state),最終界面發生了變化