Vuex狀態管理
狀態就是數據。 在react里有個Flux的數據流管理(單向數據流)
作用1：實現組件之間的數據共享。
作用2：用於緩存。(避免當用戶頻繁點擊，頁面不斷調接口)
先安裝狀態管理工具
npm install vuex -S
1.在Src文件夾里創建一個store文件夾。
2.創建一個index.js的文件，里面引入vuex，如下
再在main.js入口文件里引入狀態管理.
store里的各個選項的含義：
①：state----->要被共享的數據，都放在state中
在需要引用的地方通過$store.state.msg對應的key值，即可取到共享的數據.
console.log(this.$store)----------->一個Store類，里面有各種鍵值對 state、mutations、getters、actions、modules等等,里面有個key為state的鍵值對，通過this.$store.state可以找到vuex中state里所有的數據.
②：mutations---------->是用於改變與修改state的，當state被修改完成，頁面視圖自動更新。（mutations里的每個方法的第一個形參都為state）
作者尤雨溪不建議用這種方式直接修改共享的state數據.
建議寫法：
Store這個類就好比整個Vue的類一樣，當你想調用Store這個類里的方法時，在Store中就必須通過commit去提交一個字符串，並在store中尋找對應字符串的函數去觸發，如上圖。函數如何執行就在state中定義了
狀態管理是一種單向數據流
dev-tools的安裝：
用於配合vuex進行代碼的調試工作.如果使用之前那種強制更改state共享數據的方法，則在調試工具(F12)里的vue工具中，第二個鬧鍾選項里是無法看到共享數據的更新的。
往state里添加一個數組叫todolist，通過state共享，做一個迷你版的todolist
mutations里的方法可以傳兩個參數
並在Home.vue里
mutations里的函數可以傳多個參數，第一個參數一定是狀態管理state，之后的參數都來自於函數的實參。
③：getters------------->常用於計算state狀態管理某個值的數量(相當於是計算屬性)，當被關聯的state變量發生變化時，getters變量會重新計算(接受的第一個形參為state)
調用用$store.getters.total
④：Actions專門負責和后端接口打交道（見最后）
(actions和mutations的區別，mutations中的函數只能同步執行，而actions中的函數可以異步執行，如ajax請求)
axios：（絕大多數公司都用）
是一個http請求工具，基於Promis的封裝的
jquery用的已經很少了.
axios不僅可以用在客戶端，還可以用在node.js服務器.
Eg：axios({ }).then(res=).catch(err)
安裝方式：npm install axios;
3fengs.com-------------各種工具包網站.
npm官方文檔axios包里：
1.創建一個utils文件夾。
2.再創建一個fetch.js。
先引入
再創建axios實例：
在找到請求攔截器：，把axios改成instance實例。
請求攔截器：在請求被發送出去之前，做一些驗證工作。
響應攔截器，同上，改成instance實例。
響應攔截器：在響應到達之前，先進行數據過濾
最后導出instance--------------->export default instance;
調接口：
①：在對應組件引入axios,
②：在mounted里調用axios(get請求入參用params，post用data)
這樣可以拿到接口的所有數據
1.請求攔截器的return如果沒有，則無法響應會報錯，
2.相應攔截器的return如果沒有，則返回數據為undefined；
可以在對應的區域進行數據過濾和錯誤處理：
以后還可以加token
ES6模塊化語法里：
使用export 拋出，必須使用import{ } from ''進行引入.
使用export default { }拋出，必須import xx from '' 進行引入。
在同一個模塊中，有且僅有一個export default，可以沒有。
在同一個模塊中，export 可以不限個數.
在初始化調接口時，可以進行再次封裝：
在utils文件夾在創建一個api.js。
①：
在對應的組件頁面使用getData
getData（）函數運行之后的結果是一個promise對象，可以直接使用then方法。
②：
上面這兩步本可以直接一步export出去，但是為什么要分成兩步呢，因為在一些不是Vue為this的環境中，如狀態管理，無法使用掛載在Vue實例下的$http方法調用api，這樣就可以應用上圖中的上面一步的函數，按需加載
在store文件夾里的index.js文件，只能通過引用上面模塊才可以使用該文件里的api函數： import {getData} from ' @/utils/api'
可以將http對象掛載在vue實例上
在入口文件main.js里：
這樣Vue實例下就多了一個內置對象的方法$http.
實例中調用方法即可這樣。（當拿到的數據不需要共享時可用）。
mutations里的第一個形參才是state
actions中的方法第一個形參並不是state，而是store對象
actions是vuex官方建議的，與后端接口對接的入口，
工作中，一般讓那些需要被多個組件共享的后端數據，走actions
在actions中，可以直接修改state，但是不推薦這么做（無法在devtools中記錄顯示）
可以在狀態管理的actions中這樣使用actions，但是作者尤雨溪不建議這樣使用。
正確的方法：
並在對應組件的mounted中如下調用。
