Vue Element前端應(yīng)用開(kāi)發(fā)之Vuex中的API Store View的使用
概述
在我們開(kāi)發(fā)Vue應(yīng)用的時(shí)候,很多時(shí)候需要記錄一些變量的內(nèi)容,這些可以用來(lái)做界面狀態(tài)的承載,也可以作為頁(yè)面間交換數(shù)據(jù)的處理,處理這些內(nèi)容可以歸為Vuex的狀態(tài)控制。例如我們往往前端需要訪(fǎng)問(wèn)后端數(shù)據(jù),一般是通過(guò)封裝的Web API調(diào)用獲取數(shù)據(jù),而使用Store模式來(lái)處理相關(guān)的數(shù)據(jù)或者狀態(tài)的變化,而視圖View主要就是界面的展示處理。本篇隨筆主要介紹如何整合這三者之間的關(guān)系,實(shí)現(xiàn)數(shù)據(jù)的獲取、處理、展示等邏輯操作。
Vuex 是一個(gè)專(zhuān)為 Vue.js 應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài),并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化。關(guān)于Vuex的相關(guān)State、Getter、Mutation、Action、Module之間的差異和聯(lián)系,詳細(xì)可以參考下:https://vuex.vuejs.org/zh/
1、前后端的分離和Web API 優(yōu)先路線(xiàn)設(shè)計(jì)
Web API 是一種應(yīng)用接口框架,它能夠構(gòu)建HTTP服務(wù)以支撐更廣泛的客戶(hù)端(包括瀏覽器,手機(jī)和平板電腦等移動(dòng)設(shè)備)的框架,ASP.NET Web API 是一種用于在 .NET Framework/ .net Core 上構(gòu)建 RESTful 應(yīng)用程序的理想平臺(tái)。在目前發(fā)達(dá)的應(yīng)用場(chǎng)景下,我們往往需要接入Winform客戶(hù)端、APP程序、網(wǎng)站程序、以及目前熱火朝天的微信應(yīng)用等,這些數(shù)據(jù)應(yīng)該可以由同一個(gè)服務(wù)提供,這個(gè)就是我們所需要構(gòu)建的Web API平臺(tái)。由于Web API層作為一個(gè)公共的接口層,我們就很好保證了各個(gè)界面應(yīng)用層的數(shù)據(jù)一致性。

由于傾向于前后端的完全分離,我們后端就可以完全由Web API統(tǒng)一構(gòu)建支持,可以采用.net framework或者.net core構(gòu)建的統(tǒng)一接口平臺(tái),可以簡(jiǎn)單由Asp.net 做的Web API接口平臺(tái),也可以基于ABP-aspnetboilerplate( ABP框架隨筆介紹)框架基礎(chǔ)上構(gòu)建的Web API平臺(tái)。

這樣我們就可以基于這些API接口構(gòu)建前端多項(xiàng)應(yīng)用,如包括Web前端、Winform前端、以及對(duì)接各種APP等應(yīng)用。

引入了前后端分離的VUE + Element 的開(kāi)發(fā)方式,那么前后端的邊界則非常清晰,前端可以在通過(guò)網(wǎng)絡(luò)獲取對(duì)應(yīng)的JSON就可以構(gòu)建前端的應(yīng)用了。

在前端處理中,主要就是利用Vuex模式中的Store對(duì)象里實(shí)現(xiàn)對(duì)Action和Mutation的請(qǐng)求處理,獲取數(shù)據(jù)后,實(shí)現(xiàn)對(duì)State狀態(tài)中的數(shù)據(jù)進(jìn)行更新。如果僅僅是當(dāng)前頁(yè)面的數(shù)據(jù)處理,甚至可以不需要存儲(chǔ)State信息,直接獲取到返回的數(shù)據(jù),直接更新到界面視圖上即可。
在開(kāi)發(fā)前期,我們甚至可以不需要和后端發(fā)生任何關(guān)系,通過(guò)Mock數(shù)據(jù)代替從Web API上請(qǐng)求數(shù)據(jù),只要Mock的數(shù)據(jù)結(jié)構(gòu)和Web API接口返回的JSON一致,我們就可以在后期實(shí)現(xiàn)快速的對(duì)接,而不影響現(xiàn)有的代碼處理方式。

2、Axios網(wǎng)絡(luò)請(qǐng)求處理
在我們進(jìn)一步處理前,我們需要知道Vuex里面的一些對(duì)象概念和他們之間的關(guān)系。
Vuex 是一個(gè)專(zhuān)為 Vue.js 應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài),并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化。關(guān)于Vuex的相關(guān)State、Getter、Mutation、Action、Module之間的差異和聯(lián)系,詳細(xì)可以參考下:https://vuex.vuejs.org/zh/
在開(kāi)始發(fā)起網(wǎng)絡(luò)請(qǐng)求之前,我們需要了解axios 這個(gè)東西,axios 是一個(gè)基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶(hù)端,本質(zhì)上也是對(duì)原生XHR的封裝,只不過(guò)它是Promise的實(shí)現(xiàn)版本,符合最新的ES規(guī)范。在這里我們只需要知道它是非常強(qiáng)大的網(wǎng)絡(luò)請(qǐng)求處理庫(kù),且得到廣泛應(yīng)用即可,列舉幾個(gè)代碼案例進(jìn)行了解。
POST請(qǐng)求
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
GET請(qǐng)求
axios
.get('http://rap2api.taobao.org/app/mock/23080/resources/search',{
params: {
id: 5
}
})
.then(res => {
console.log('數(shù)據(jù)是:', res);
})
.catch((e) => {
console.log('獲取數(shù)據(jù)失敗');
});
如果我們要跨域請(qǐng)求數(shù)據(jù),在配置文件里設(shè)置代理,vue-cli3項(xiàng)目,需要在vue.config.js里面寫(xiě)配置。

可以分別設(shè)置請(qǐng)求攔截和響應(yīng)攔截,在發(fā)出請(qǐng)求和響應(yīng)到達(dá)then之前進(jìn)行判斷處理,一般的處理方式就是封裝一個(gè)類(lèi)如request類(lèi),然后進(jìn)行對(duì)攔截器的統(tǒng)一處理,如在請(qǐng)求前增加一些用戶(hù)身份信息等。

// create an axios instance
const service = axios.create({
timeout: 5000 // request timeout
})
// request 請(qǐng)求攔截
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的使用
我們?cè)俅位氐絍uex中的API、Store和View的使用介紹上。


我們來(lái)看看API的封裝請(qǐng)求調(diào)用類(lèi)的封裝,如下所示,我們創(chuàng)建了一些操作數(shù)據(jù)的API類(lèi)文件,每個(gè)API名稱(chēng)對(duì)應(yīng)一個(gè)業(yè)務(wù)的集中處理,包括特定業(yè)務(wù)的列表請(qǐng)求、單個(gè)請(qǐng)求、增加、刪除、修改等等都可以封裝在一個(gè)API類(lèi)里面。

我們來(lái)看看Product.js的類(lèi)文件定義如下所示。

這里我用了Request和Axios的操作對(duì)比,兩者很接近,因?yàn)閞equest是對(duì)Axios的簡(jiǎn)單封裝,主要就是攔截注入一些登錄信息和一些響應(yīng)的錯(cuò)誤處理而已。
import request from '@/utils/request' import axios from 'axios'
這里的Url里面,通過(guò)代理配置的處理,會(huì)把對(duì)應(yīng)的iqidi替換為對(duì)應(yīng)外部域名的處理,從而實(shí)現(xiàn)對(duì)跨域處理請(qǐng)求數(shù)據(jù)的獲取了,我們這里只需要知道,url最終會(huì)轉(zhuǎn)換為類(lèi)似
http://www.iqidi.com/h5/GetProductList 這樣實(shí)際的地址進(jìn)行請(qǐng)求的即可,返回是一個(gè)JSON數(shù)據(jù)集合。

由于Vue視圖里面的JS處理部分,可以直接引入API進(jìn)行請(qǐng)求數(shù)據(jù),如下所示。
import { GetProductList } from '@/api/product'
然后我們就可以在method方法里面定義一個(gè)獲取API數(shù)據(jù)的方法了。
methods: {
getlist(type) {
GetProductList({ type: type }).then(response => {
const { data } = response
this.productlist = data.list
this.listLoading = false
})
}
這種調(diào)用是最直接的API調(diào)用,沒(méi)有引入Store模塊中封裝的Action或者M(jìn)utation進(jìn)行異步或者同步的處理。一般情況下直接使用這種方式比較簡(jiǎn)潔,因?yàn)榇蠖鄶?shù)頁(yè)面處理或者組件處理,不需要對(duì)數(shù)據(jù)進(jìn)行全局狀態(tài)的存儲(chǔ)處理,也就是不需要進(jìn)行全局Store對(duì)象的處理了。
如果我們需要在全局存儲(chǔ)對(duì)應(yīng)的信息,那么就需要引入Store模塊中對(duì)API調(diào)用的封裝了,包括Action或者M(jìn)utation的處理。
我們先來(lái)定義Store存儲(chǔ)類(lèi),如下界面所示。

如果我們需要對(duì)產(chǎn)品列表等數(shù)據(jù)進(jìn)行全局狀態(tài)的存儲(chǔ),那么我們可以考慮創(chuàng)建一個(gè)對(duì)應(yīng)Store目錄下的模塊,如product.js,來(lái)管理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 = {
// 產(chǎn)品列表
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)
})
})
},
// 獲取產(chǎn)品明細(xì)
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
}
我們下來(lái)看看,如果引入了Store模塊的業(yè)務(wù)類(lèi),那么在界面視圖中調(diào)用代碼則修改為調(diào)用對(duì)應(yīng)的Action或者M(jìn)utation了。
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
})
}
我們這里強(qiáng)調(diào)一下,一般情況下在視圖模塊中使用API的類(lèi)調(diào)用即可,不需要累贅的每個(gè)業(yè)務(wù)模塊,都創(chuàng)建一個(gè)Store的模塊類(lèi)進(jìn)行相應(yīng)的管理,只有在這些狀態(tài)數(shù)據(jù)需要在多個(gè)頁(yè)面或者組件中需要共享的時(shí)候,才考慮引入Store模塊類(lèi)進(jìn)行細(xì)化管理。
我們剛才說(shuō)到,如果需要?jiǎng)?chuàng)建對(duì)應(yīng)業(yè)務(wù)模塊的Store狀態(tài)管理模塊,那么需要?jiǎng)?chuàng)建對(duì)應(yīng)的模塊類(lèi),如前面說(shuō)到的product.js類(lèi)文件。

其中Modules目錄里面的按照業(yè)務(wù)區(qū)分邊界的Vuex的Store管理類(lèi)了,每個(gè)對(duì)應(yīng)業(yè)務(wù)創(chuàng)建一個(gè)單獨(dú)的文件進(jìn)行管理(如果需要用到的話(huà))。
在index.js里面我們通過(guò)模塊動(dòng)態(tài)加載的方式,把這些類(lèi)按照不同的命名空間進(jìn)行加載進(jìn)來(lái),統(tǒng)一使用。
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
以上就是Vue Element前端應(yīng)用開(kāi)發(fā)之Vuex中的API Store View的使用的詳細(xì)內(nèi)容,更多關(guān)于Vue的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
- Vue Element前端應(yīng)用開(kāi)發(fā)之獲取后端數(shù)據(jù)
- Vue Element前端應(yīng)用開(kāi)發(fā)之動(dòng)態(tài)菜單和路由的關(guān)聯(lián)處理
- Vue Element前端應(yīng)用開(kāi)發(fā)之開(kāi)發(fā)環(huán)境的準(zhǔn)備工作
- Vue3+elementui plus創(chuàng)建項(xiàng)目的方法
- vue element實(shí)現(xiàn)表格合并行數(shù)據(jù)
- Vue項(xiàng)目如何引入bootstrap、elementUI、echarts
- vue element-ul實(shí)現(xiàn)展開(kāi)和收起功能的實(shí)例代碼
- Vue使用Element實(shí)現(xiàn)增刪改查+打包的步驟
- vue+Element-ui實(shí)現(xiàn)登錄注冊(cè)表單
- Vue Element前端應(yīng)用開(kāi)發(fā)之菜單資源管理
相關(guān)文章
Vue中對(duì)watch的理解(關(guān)鍵是immediate和deep屬性)
watch偵聽(tīng)器,是Vue實(shí)例的一個(gè)屬性,是用來(lái)響應(yīng)數(shù)據(jù)的變化,需要在數(shù)據(jù)變化時(shí)執(zhí)行異步或開(kāi)銷(xiāo)較大的操作時(shí),這個(gè)方式是最有用的,這篇文章主要介紹了Vue中對(duì)watch的理解,需要的朋友可以參考下2022-11-11
Vue使用babel-polyfill兼容IE解決白屏及語(yǔ)法報(bào)錯(cuò)問(wèn)題
這篇文章主要介紹了Vue使用babel-polyfill兼容IE解決白屏及語(yǔ)法報(bào)錯(cuò)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue在html標(biāo)簽{{}}中調(diào)用函數(shù)的方法總結(jié)及對(duì)比
這篇文章主要給大家介紹了關(guān)于vue在html標(biāo)簽{{}}中調(diào)用函數(shù)的方法總結(jié)及對(duì)比,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-03-03
vue+Element?ui實(shí)現(xiàn)照片墻效果
這篇文章主要為大家詳細(xì)介紹了vue+Element?ui實(shí)現(xiàn)照片墻效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04
Vue項(xiàng)目中如何使用Axios封裝http請(qǐng)求詳解
這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目中如何使用Axios封裝http請(qǐng)求的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
Vue 自定義指令實(shí)現(xiàn)一鍵 Copy功能
指令 (Directives) 是帶有 v- 前綴的特殊特性。這篇文章主要介紹了Vue 自定義指令實(shí)現(xiàn)一鍵 Copy的功能,需要的朋友可以參考下2019-09-09
Vant中List組件immediate-check=false無(wú)效的解決
這篇文章主要介紹了Vant中List組件immediate-check=false無(wú)效的解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-01-01
vue中導(dǎo)出Excel表格的實(shí)現(xiàn)代碼
項(xiàng)目中我們可能會(huì)碰到導(dǎo)出Excel文件的需求,這篇文章主要介紹了vue中導(dǎo)出Excel表格的實(shí)現(xiàn)代碼,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2018-10-10
vue實(shí)現(xiàn)短信驗(yàn)證碼登錄功能(流程詳解)
無(wú)論是移動(dòng)端還是pc端登錄或者注冊(cè)界面都會(huì)見(jiàn)到手機(jī)驗(yàn)證碼登錄這個(gè)功能,輸入手機(jī)號(hào),得到驗(yàn)證碼,這篇文章主要介紹了基于vue實(shí)現(xiàn)短信驗(yàn)證碼登錄功能,需要的朋友可以參考下2019-12-12

