循序漸進VUE+Element 前端應用開發(2）--- Vuex中的API、Store和View的使用
在我們開發Vue應用的時候，很多時候需要記錄一些變數的內容，這些可以用來做介面狀態的承載，也可以作為頁面間交換資料的處理，處理這些內容可以歸為Vuex的狀態控制。例如我們往往前端需要訪問後端資料，一般是通過封裝的Web API呼叫獲取資料，而使用Store模式來處理相關的資料或者狀態的變化，而檢視View主要就是介面的展示處理。本篇隨筆主要介紹如何整合這三者之間的關係，實現資料的獲取、處理、展示等邏輯操作。
Vuex 是一個專為 Vue.js 應用程式開發的狀態管理模式。它採用集中式儲存管理應用的所有元件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。關於Vuex的相關State、Getter、Mutation、Action、Module之間的差異和聯絡，詳細可以參考下：https://vuex.vuejs.org/zh/
1、前後端的分離和Web API 優先路線設計
Web API 是一種應用介面框架，它能夠構建HTTP服務以支撐更廣泛的客戶端（包括瀏覽器，手機和平板電腦等移動裝置）的框架， ASP.NET Web API 是一種用於在 .NET Framework/ .net Core 上構建 RESTful 應用程式的理想平臺。在目前發達的應用場景下，我們往往需要接入Winform客戶端、APP程式、網站程式、以及目前熱火朝天的微信應用等，這些資料應該可以由同一個服務提供，這個就是我們所需要構建的Web API平臺。由於Web API層作為一個公共的介面層，我們就很好保證了各個介面應用層的資料一致性。
由於傾向於前後端的完全分離，我們後端就可以完全由Web API統一構建支援，可以採用.net framework或者.net core構建的統一介面平臺，可以簡單由Asp.net 做的Web API介面平臺，也可以基於ABP-aspnetboilerplate（ ABP框架隨筆介紹）框架基礎上構建的Web API平臺。
這樣我們就可以基於這些API介面構建前端多項應用，如包括Web前端、Winform前端、以及對接各種APP等應用。
引入了前後端分離的VUE + Element 的開發方式，那麼前後端的邊界則非常清晰，前端可以在通過網路獲取對應的JSON就可以構建前端的應用了。
在前端處理中，主要就是利用Vuex模式中的Store物件裡實現對Action和Mutation的請求處理，獲取資料後，實現對State狀態中的資料進行更新。如果僅僅是當前頁面的資料處理，甚至可以不需要儲存State資訊，直接獲取到返回的資料，直接更新到介面檢視上即可。
在開發前期，我們甚至可以不需要和後端發生任何關係，通過Mock資料代替從Web API上請求資料，只要Mock的資料結構和Web API介面返回的JSON一致，我們就可以在後期實現快速的對接，而不影響現有的程式碼處理方式。
2、Axios網路請求處理
在我們進一步處理前，我們需要知道Vuex裡面的一些物件概念和他們之間的關係。
Vuex 是一個專為 Vue.js 應用程式開發的狀態管理模式。它採用集中式儲存管理應用的所有元件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。關於Vuex的相關State、Getter、Mutation、Action、Module之間的差異和聯絡，詳細可以參考下：https://vuex.vuejs.org/zh/
在開始發起網路請求之前，我們需要了解axios 這個東西，axios 是一個基於Promise 用於瀏覽器和 nodejs 的 HTTP 客戶端，本質上也是對原生XHR的封裝，只不過它是Promise的實現版本，符合最新的ES規範。在這裡我們只需要知道它是非常強大的網路請求處理庫，且得到廣泛應用即可，列舉幾個程式碼案例進行了解。
POST請求
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
GET請求
axios
.get('http://rap2api.taobao.org/app/mock/23080/resources/search',{
params: {
id: 5
}
})
.then(res => {
console.log('資料是:', res);
})
.catch((e) => {
console.log('獲取資料失敗');
});
如果我們要跨域請求資料，在配置檔案裡設定代理，vue-cli3專案，需要在vue.config.js裡面寫配置。
可以分別設定請求攔截和響應攔截，在發出請求和響應到達then之前進行判斷處理，一般的處理方式就是封裝一個類如request類，然後進行對攔截器的統一處理，如在請求前增加一些使用者身份資訊等。
// create an axios instance
const service = axios.create({
timeout: 5000 // request timeout
})
// request 請求攔截
service.interceptors.request.use(
config => {
if (store.getters.token) {
config.headers['X-Token'] = getToken()
}
return config
},
error => {
// do something with request error
console.log(error) // for debug
return Promise.reject(error)
}
)
3、Vuex中的API、Store和View的使用
我們再次回到Vuex中的API、Store和View的使用介紹上。
我們來看看API的封裝請求呼叫類的封裝，如下所示，我們建立了一些操作資料的API類檔案，每個API名稱對應一個業務的集中處理，包括特定業務的列表請求、單個請求、增加、刪除、修改等等都可以封裝在一個API類裡面。
我們來看看Product.js的類檔案定義如下所示。
這裡我用了Request和Axios的操作對比，兩者很接近，因為request是對Axios的簡單封裝，主要就是攔截注入一些登入資訊和一些響應的錯誤處理而已。
import request from '@/utils/request' import axios from 'axios'
這裡的Url裡面，通過代理配置的處理，會把對應的iqidi替換為對應外部域名的處理，從而實現對跨域處理請求資料的獲取了，我們這裡只需要知道，url最終會轉換為類似
http://www.iqidi.com/h5/GetProductList 這樣實際的地址進行請求的即可，返回是一個JSON資料集合。由於Vue視圖裡面的JS處理部分，可以直接引入API進行請求資料，如下所示。
import { GetProductList } from '@/api/product'
然後我們就可以在method方法裡面定義一個獲取API資料的方法了。
methods: {
getlist(type) {
GetProductList({ type: type }).then(response => {
const { data } = response
this.productlist = data.list
this.listLoading = false
})
}
這種呼叫是最直接的API呼叫，沒有引入Store模組中封裝的Action或者Mutation進行非同步或者同步的處理。一般情況下直接使用這種方式比較簡潔，因為大多數頁面處理或者元件處理，不需要對資料進行全域性狀態的儲存處理，也就是不需要進行全域性Store物件的處理了。
如果我們需要在全域性儲存對應的資訊，那麼就需要引入Store模組中對API呼叫的封裝了，包括Action或者Mutation的處理。
我們先來定義Store儲存類，如下介面所示。
如果我們需要對產品列表等資料進行全域性狀態的儲存，那麼我們可以考慮建立一個對應Store目錄下的模組，如product.js，來管理Action、Mutation和State等資訊。
import { GetProductList, GetProductDetail } from '@/api/product'
const state = {
productlist: [],
productdetail: null
}
const mutations = {
SET_PRODUCT_LIST: (state, list) => {
state.productlist = list
},
SET_PRODUCT_DETAIL: (state, detail) => {
state.productdetail = detail
}
}
const actions = {
// 產品列表
getProductList({ commit }, { type }) {
console.log(type);
return new Promise((resolve, reject) => {
GetProductList({ type: type }).then(response => {
const { data } = response
commit('SET_PRODUCT_LIST', data)
resolve(data)
}).catch(error => {
reject(error)
})
})
},
// 獲取產品明細
getProductDetail({ commit }, { id }) {
return new Promise((resolve, reject) => {
GetProductDetail({ id: id }).then(response => {
const { data } = response
commit('SET_PRODUCT_DETAIL', data)
resolve(data)
}).catch(error => {
reject(error)
})
})
}
}
export default {
namespaced: true,
state,
mutations,
actions
}
我們下來看看，如果引入了Store模組的業務類，那麼在介面檢視中呼叫程式碼則修改為呼叫對應的Action或者Mutation了。
methods: {
getlist(type) {
// GetProductList({ type: type }).then(response => {
// const { data } = response
// this.productlist = data.list
// this.listLoading = false
// })
this.$store.dispatch('product/getProductList', { type: type }).then(data => {
this.productlist = data.list
// this.loading = false
}).catch((e) => {
// this.loading = false
})
}
我們這裡強調一下，一般情況下在檢視模組中使用API的類呼叫即可，不需要累贅的每個業務模組，都建立一個Store的模組類進行相應的管理，只有在這些狀態資料需要在多個頁面或者元件中需要共享的時候，才考慮引入Store模組類進行細化管理。
我們剛才說到，如果需要建立對應業務模組的Store狀態管理模組，那麼需要建立對應的模組類，如前面說到的product.js類檔案。
其中Modules目錄裡面的按照業務區分邊界的Vuex的Store管理類了，每個對應業務建立一個單獨的檔案進行管理（如果需要用到的話）。
在index.js裡面我們通過模組動態載入的方式，把這些類按照不同的名稱空間進行載入進來，統一使用。
import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
Vue.use(Vuex)
// https://webpack.js.org/guides/dependency-management/#requirecontext
const modulesFiles = require.context('./modules', true, /\.js$/)
// you do not need `import app from './modules/app'`
// it will auto require all vuex module from modules file
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
// set './app.js' => 'app'
const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
const value = modulesFiles(modulePath)
modules[moduleName] = value.default
return modules
}, {})
const store = new Vuex.Store({
modules,
getters
})
export default store