循序漸進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里面的一些物件概念和他們之間的關系，

在開始發起網路請求之前，我們需要了解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 =https://www.cnblogs.com/wuhuacong/p/> {
        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

為了方便讀者理解，我列出一下前面幾篇隨筆的連接，供參考：

循序漸進VUE+Element 前端應用開發(1）--- 開發環境的準備作業

循序漸進VUE+Element 前端應用開發(2）--- Vuex中的API、Store和View的使用

循序漸進VUE+Element 前端應用開發(3）--- 動態選單和路由的關聯處理

循序漸進VUE+Element 前端應用開發(4）--- 獲取后端資料及產品資訊頁面的處理

循序漸進VUE+Element 前端應用開發(5）--- 表格串列頁面的查詢，串列展示和欄位轉義處理

循序漸進VUE+Element 前端應用開發(6）--- 常規Element 界面組件的使用

循序漸進VUE+Element 前端應用開發(7）--- 介紹一些常規的JS處理函式

循序漸進VUE+Element 前端應用開發(8）--- 樹串列組件的使用

循序漸進VUE+Element 前端應用開發(9）--- 界面語言國際化的處理

循序漸進VUE+Element 前端應用開發(10）--- 基于vue-echarts處理各種圖表展示

循序漸進VUE+Element 前端應用開發(11）--- 圖示的維護和使用

循序漸進VUE+Element 前端應用開發(12）--- 整合ABP框架的前端登錄處理

循序漸進VUE+Element 前端應用開發(13）--- 前端API介面的封裝處理

循序漸進VUE+Element 前端應用開發(14）--- 根據ABP后端介面實作前端界面展示

循序漸進VUE+Element 前端應用開發(15）--- 用戶管理模塊的處理

循序漸進VUE+Element 前端應用開發(16）--- 組織機構和角色管理模塊的處理

循序漸進VUE+Element 前端應用開發(17）--- 選單管理

循序漸進VUE+Element 前端應用開發(18）--- 功能點管理及權限控制

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/36797.html

標籤：Html/Css

上一篇：1.html5概述

下一篇：html：標簽（標題、段落、換行、文本格式化、影像）