Vuex與axios的封裝和調用

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中以下調用。