Vue Element前端應用開發之Vuex中的API Store View的使用

在我們開發Vue應用的時候，很多時候需要記錄一些變量的內容，這些可以用來做界面狀態的承載，也可以作為頁面間交換數據的處理，處理這些內容可以歸為Vuex的狀態控制。例如我們往往前端需要訪問后端數據，一般是通過封裝的Web API調用獲取數據，而使用Store模式來處理相關的數據或者狀態的變化，而視圖View主要就是界面的展示處理。本篇隨筆主要介紹如何整合這三者之間的關系，實現數據的獲取、處理、展示等邏輯操作。

Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。它采用集中式存儲管理應用的所有組件的狀態，并以相應的規則保證狀態以一種可預測的方式發生變化。關于Vuex的相關State、Getter、Mutation、Action、Module之間的差異和聯系，詳細可以參考下：https://vuex.vuejs.org/zh/

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一致，我們就可以在后期實現快速的對接，而不影響現有的代碼處理方式。

在我們進一步處理前，我們需要知道Vuex里面的一些對象概念和他們之間的關系。

Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。它采用集中式存儲管理應用的所有組件的狀態，并以相應的規則保證狀態以一種可預測的方式發生變化。關于Vuex的相關State、Getter、Mutation、Action、Module之間的差異和聯系，詳細可以參考下：https://vuex.vuejs.org/zh/

在開始發起網絡請求之前，我們需要了解axios 這個東西，axios 是一個基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端，本質上也是對原生XHR的封裝，只不過它是Promise的實現版本，符合最新的ES規范。在這里我們只需要知道它是非常強大的網絡請求處理庫，且得到廣泛應用即可，列舉幾個代碼案例進行了解。

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 instanceconst 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 } = responsecommit(’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 } = responsecommit(’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/#requirecontextconst modulesFiles = require.context(’./modules’, true, /.js$/)// you do not need `import app from ’./modules/app’`// it will auto require all vuex module from modules fileconst 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前端應用開發之Vuex中的API Store View的使用的詳細內容，更多關于Vue的資料請關注好吧啦網其它相關文章！