概述

在我們開(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)文章！