這裏主要理解Vuex是實現數據共享的單例模式，當一個組件修改state時，其它組件顯示的state也會變化，解決了Vue數據單向傳輸的問題，當一個組件修改state時，由於單向傳輸的特性，state並沒有改變
一.使用流程
1 安裝vuex
npm i vuex -S
2 文件目錄
3 結構文件（index.js）
- 導入對應的包
- 聲明在Vue中使用Vuex
-
對外暴露一個Vuex的Store對象
![]()
4 數據文件（state.js）
- 向外暴露全局共享數據
一般是從服務器獲取的json對象
5 統一變量名（mutations-type.js）
由於會在actions中調用mutations中的方法，所以會將mutations中的方法名在mutations-type文件中統一管理
6 操作數據文件（mutations.js）
- 引入方法名稱常量
-
導出需要暴露的方法
![]()
7 修改數據文件（action）
- 導入網絡請求API
- 導入方法名常量
- 向外暴露請求數據的方法
- 請求數據
- 如果有效就調用commit函數利用mutations中定義的方法修改state這裏mutations-type定義常量表示方法名的作用就顯現出來了
8 將state中的數據渲染到view上（getters）
從組件修改state的流程，可以看出一個組件修改，所有都會變化
9 組件調用actions方法（navbar組件中的created方法）
10 在main.js中導入vuex並註冊
