Vuex與axios的封裝和調用
- 2020 年 7 月 18 日
- 筆記
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值，即可取到共享的數據.
②：mutations———->是用於改變與修改state的，當state被修改完成，頁面視圖自動更新。（mutations里的每個方法的第一個形參都為state）
作者尤雨溪不建議用這種方式直接修改共享的state數據.
建議寫法：
狀態管理是一種單向數據流
dev-tools的安裝：
用於配合vuex進行程式碼的調試工作.如果使用之前那種強制更改state共享數據的方法，則在調試工具(F12)里的vue工具中，第二個鬧鐘選項里是無法看到共享數據的更新的。
往state里添加一個數組叫todolist，通過state共享，做一個迷你版的todolist
mutations里的方法可以傳兩個參數
並在Home.vue里
mutations里的函數可以傳多個參數，第一個參數一定是狀態管理state，之後的參數都來自於函數的實參。
③：getters————->常用於計算state狀態管理某個值的數量(相當於是計算屬性)，當被關聯的state變數發生變化時，getters變數會重新計算
調用用$store.getters.total
④：Actions專門負責和後端介面打交道（見最後）
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方法。
②：
可以將http對象掛載在vue實例上
在入口文件main.js里：
這樣Vue實例下就多了一個內置對象的方法$http.
實例中調用方法即可這樣。（當拿到的數據不需要共享時可用）。
只有mutations里的第一個形參才是state
actions中的方法第一個形參並不是state，而是store對象
actions是vuex官方建議的，與後端介面對接的入口，
工作中，一般讓那些需要被多個組件共享的後端數據，走actions
在actions中，可以直接修改state，但是不推薦這麼做（無法在devtools中記錄顯示）
可以在狀態管理的actions中這樣使用actions，但是作者尤雨溪不建議這樣使用。
正確的方法：
並在對應組件的mounted中如下調用。
