vue2.0學(xué)習(xí)之a(chǎn)xios的封裝與vuex介紹

一、前言

博主也是vue道路上的行者，道行不深，希望自己的東西能對(duì)大家有所幫助。這篇博客針對(duì) 了解過(guò)vue基礎(chǔ)，但是沒(méi)有做過(guò)vue項(xiàng)目的童鞋。如果想看基礎(chǔ)指令，可以看我之前的一篇博客，請(qǐng)點(diǎn)擊  跳轉(zhuǎn)，  不過(guò)我還是建議看文檔比較好。os: Vue文檔是非常詳細(xì)的

二、準(zhǔn)備

做vue單頁(yè)應(yīng)用都需要會(huì)什么？

    1.  vue的腳手架，直接幫你建好項(xiàng)目。再看看自己想要啥，補(bǔ)充啥！  os:  Git 上有很多成品項(xiàng)目，可以找一個(gè)好點(diǎn)的拉下來(lái)

　　注：路由按需加載、熱加載 等這些都是基礎(chǔ)功能，在這不多說(shuō)。os: 慕課網(wǎng)有Vue的課程，網(wǎng)上有資源，挺不錯(cuò)的

    2. 引入并會(huì)使用 vuex。對(duì)共享變量進(jìn)行統(tǒng)一管理，解決多層組件傳數(shù)據(jù)的問(wèn)題。這個(gè)咱后面詳說(shuō)。

    3. 封裝 axios，對(duì)請(qǐng)求進(jìn)行統(tǒng)一的管理，并減少代碼量。

三、關(guān)于vuex

出現(xiàn)背景：  了解過(guò)vue1.0的人應(yīng)該都知道，vue的父子組件通信是很煩的，一層還好。如果有個(gè)3、4層，那父子組件通信，就頭疼了。以前，這是需要開(kāi)發(fā)者捋清邏輯，在合適的地方修改并傳遞的。但是vue2.0為了解決這個(gè)問(wèn)題，提出了vuex，狀態(tài)統(tǒng)一管理。

作用：vuex 將所有需要共享的變量放在一起，像一個(gè)倉(cāng)庫(kù)一般，你想對(duì)倉(cāng)庫(kù)中的變量  讀取、修改 ，直接調(diào) 指定方法就可以，超級(jí)方便。

    結(jié)構(gòu)： vuex的結(jié)構(gòu)大致為：

　　　　　　　state:  存放所有變量

　　　　　　　mutations  存放同步讀取、修改state的的方法

　　　　　　    action       存放異步讀取、修改state的的方法

　　　　　　　 .......還有很多其他的  os: 這篇博客只是幫大家了解如何用Vue做單頁(yè)應(yīng)用。　　　　

注：1.  不是所有變量都要放到 state 中，vuex 創(chuàng)立的初衷是方便我們對(duì)變量的管理，然而對(duì)組件的一些私有變量，不需要和別的組件共享。所以，state里面只放全局變量、多組件共享變量。

　　2.  解釋一下 action ，所謂異步，就是在 action 文件中寫(xiě)方法，調(diào) axios，然后再 調(diào) mutations 同步修改state。很多人不理解，其實(shí)，這就是一個(gè)概念性的問(wèn)題。action并沒(méi)有從根本上解決異步修改state的競(jìng)爭(zhēng)問(wèn)題，但是我們需要理解、并將 異步這個(gè)操作 摘出來(lái)放在一起。

　　os: js腳本 本來(lái)就是同步的東西，一根筋，同一時(shí)間無(wú)法處理2件事，不存在多線程處理事務(wù)。不過(guò)，科技發(fā)展的這么牛逼，大家懂得。這個(gè)異步、競(jìng)爭(zhēng)的思想還是要提出來(lái)的，指不定哪天就被大家研究出了解決方案。

四、關(guān)于vuex的具體使用

先看一下項(xiàng)目的部分目錄結(jié)構(gòu)

1. state.js

const state = {
 topList: {},
 msgg: '1231321312',
 alertFlag: {state: false, type: ''},
 errorStatus: '',
 alertData: {title: '警告', content: '這是敏感信息，一旦刪除，不可再恢復(fù)，確認(rèn)刪除嗎', operateOk: '確定', operateCan: '取消', time: ''},
 httpError: {
 hasError: false,
 status: '',
 statusText: ''
 },
 tip: {
 tipFlag: false,
 tipMsg: ''
 }
}

export default state

state  文件里面存放一個(gè)state對(duì)象，具體的元素就是我們的變量了，需要什么數(shù)據(jù)，和組件的data函數(shù)中一樣寫(xiě)法。這里只是起到存儲(chǔ)作用

2.  mutations.js

import * as types from './mutation-types'

const mutations = {
 // 顯示彈窗
 [types.SET_ALERT_FLAG](state, data) {
 state.alertFlag = data
 },
 // 設(shè)置彈窗內(nèi)容
 [types.SET_ALERT_DETAIL](state, data) {
 Object.assign(state.alertData, data)
 },
 [types.ON_HTTP_ERROR](state, payload) {
 state.httpError = payload
 },
 // 設(shè)置提示彈層
 [types.SET_TIP_INFOR](state, data) {
 state.tip = data
 }
}

export default mutations

mutations 同步修改 state的值，僅僅是提供一個(gè)方法，接收參數(shù)，修改state值的文件。就是一個(gè)存儲(chǔ)修改state方法的倉(cāng)庫(kù)。

一般我們?cè)陂_(kāi)發(fā)的時(shí)候請(qǐng)求比較多，我們會(huì)新建一個(gè)  mutation-types.js  文件，將所有函數(shù)用常量保存。其實(shí)也沒(méi)什么特殊意義，僅僅是將方法統(tǒng)一保存，查找、維護(hù)比較方便而已。

3. action

import * as types from './mutation-types'
import { getTest } from '../server/index.js'

export const getData = function ({commit, state}, {list, index}) {
 commit(types.SET_TIP_INFOR, {tipFlag: false, tipMsg: ''})
}

export const actionTest = function ({commit, state}, data) {
 getTest({
 url: 'getPhoneCode.php',
 data: JSON.stringify({
 'phone': '18862533985'
 })
 })
 .then(response => {
 console.log(response.data)
 commit(types.SET_ALERT_DETAIL, {title: '提示', content: '您確定要還款嗎？'})
 commit(types.SET_ALERT_FLAG, {state: true, type: ''})
 })
}

action  異步修改  state  的值。說(shuō)白了，action也是一個(gè)存放修改state方法的倉(cāng)庫(kù)，但是 這些方法都是要調(diào)axios請(qǐng)求的(所以叫異步)，請(qǐng)求完事了，再調(diào) mutations 去同步修改state的值。所謂的異步都是我們自己寫(xiě)的。當(dāng)然你不這么寫(xiě)也行，只是設(shè)計(jì)者的初衷是想讓讓開(kāi)發(fā)者清楚異步修改的概念，雖然暫時(shí)沒(méi)有解決根本問(wèn)題。

這里涉及到axios請(qǐng)求，這個(gè)下邊解釋?zhuān)瑫簳r(shí)先清楚 action的概念。

4. vuex和組件通信

上述介紹了 vuex的幾個(gè)部分的作用，那現(xiàn)在就是如何在組件中去使用 vuex

首先，在main.js中，你需要將store對(duì)象引入到整個(gè)應(yīng)用中

new Vue({
 el: '#app',
 router,
 store,
 render: h => h(App)
})

然后在組件中使用

// 直接使用
 <alert v-if="this.$store.state.alertFlag.state"></alert>
// 同步的 commit
 this.$store.commit('SET_ALERT_DETAIL', {title: '提示', content: '您確定要還款嗎？'}

// 異步的 dispatch
 this.$store.dispatch('actionTest').then(() => {})

簡(jiǎn)單介紹一下：

　　this.$store.state.  我們通過(guò)$store對(duì)象 ，直接使用state中的屬性

　　this.$store.commit('', {})   通過(guò) commit 方法調(diào)  mutations-types 中的方法（其實(shí)就是mutations的方法），這步是同步的，而且數(shù)據(jù)會(huì)自動(dòng)監(jiān)聽(tīng)變化就行渲染

　　this.$store.dispatch('actionTest').then(() => {})  通過(guò) dispatch 的方法調(diào) action 的方法，異步修改 state

　　注：vue中的這個(gè)  this 注意他的指向，建議不確定時(shí)，先將this賦給變量保存起來(lái)，有時(shí)經(jīng)常會(huì)和window對(duì)象混淆。

　　以上就是vuex最基礎(chǔ)的用法，也是最常用的方法。其他的像 getters 、如何組件中引入vuex等等，這里就不細(xì)說(shuō)了，大家可以根據(jù)自身需求自行看文檔補(bǔ)充。

 五、 封裝axios

在一個(gè)完整的項(xiàng)目中，我們的和服務(wù)端的交互會(huì)很頻繁，一個(gè)項(xiàng)目會(huì)有很多請(qǐng)求，冗余代碼很多。所以將請(qǐng)求封裝，統(tǒng)一管理還是很有必要的。我們現(xiàn)在做一個(gè)簡(jiǎn)單的封裝。

1. 先看一下結(jié)構(gòu)

2. 看一下具體代碼

axios.js 文件

import axios from 'axios'

// 創(chuàng)建axios實(shí)例 application/x-www-data-urlencoded application/json
const service = axios.create({
 baseURL: 'http://www.niepengfei.cn/PHPFile/ybtDemo/',
 timeout: 15000,
 headers: {'Content-Type': 'application/json'}
})

service.interceptors.response.use(
 function(response) {
 // 請(qǐng)求正常則返回,這里返回了所有的請(qǐng)求頭和請(qǐng)求體信息
 return Promise.resolve(response)
 },
 function(error) {
 // 請(qǐng)求錯(cuò)誤則向store commit這個(gè)狀態(tài)變化
 const httpError = {
 alertFlag: true,
 errorStatus: error.response.status,
 msgg: error.response.statusText
 }
 this.$store.commit('SET_ALERT_FLAG', {state: false, type: 'ok'})
 console.log(httpError)
 return Promise.reject(error)
 }
)

export default service

index.js 文件

import request from './axios.js'
export function getTest(axiosData) {
 var data = {
 url: '',
 method: 'post',
 data: ''
 }
// 合成請(qǐng)求對(duì)象
 Object.assign(data, axiosData)
 return request(data)
}

這里我們僅僅做了post 請(qǐng)求的封裝。先對(duì)axios做上默認(rèn)請(qǐng)求的數(shù)據(jù)，封裝成函數(shù)，有傳參就合并修改參數(shù)數(shù)據(jù)，請(qǐng)求結(jié)束之后，根據(jù)response、error，分成成功和失敗兩個(gè)函數(shù)，并將整個(gè)promise對(duì)象返回。對(duì)于請(qǐng)求的攔截這里沒(méi)做。而且對(duì)網(wǎng)絡(luò)請(qǐng)求的錯(cuò)誤碼也是大家根據(jù)項(xiàng)目具體提示的。我這里也不做詳細(xì)的說(shuō)明了

3. 組件中使用

import { getTest } from '../../server/index.js'
getTest({
 url: 'login.php',
 data: JSON.stringify({
 'phone': thiss.phone,
 'phoneCode': thiss.phoneCode
 })
 })
 .then(response => {
 console.log(response.data)
 if (response.data.code === '0000') {
 ...
 }
 })

將封裝的axios引入組件，然后直接調(diào)用即可

六、總結(jié)

以上就是 vuex+axios封裝的實(shí)例，時(shí)間原因，這里進(jìn)提供思路和簡(jiǎn)單的實(shí)現(xiàn)方法，至于具體項(xiàng)目具體分析，axios要怎么封裝，vuex還需做什么監(jiān)聽(tīng)，那就是大家為自己項(xiàng)目定制的東西了。

好了，以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)億速云的支持。