按部就班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/

一、先後端的分離和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一致，咱們就能夠在後期實現快速的對接，而不影響現有的代碼處理方式。

  

二、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)
  }
)

 

三、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