由于接口在上線前，不可避免的會(huì)出現(xiàn)變動(dòng)，小則屬性名變，大則結(jié)構(gòu)變化。如果處理不當(dāng)，結(jié)構(gòu)變化時(shí)，視圖的代碼也需要做相應(yīng)的更改，然后就是容錯(cuò)方法的變動(dòng)，接著重新自測等，這樣，變化成本隨著結(jié)構(gòu)的復(fù)雜度大大加深。如何適應(yīng)這種變化，從而提供一種穩(wěn)定的數(shù)據(jù)結(jié)構(gòu)供視圖使用，提升開發(fā)、協(xié)作效率呢？

答案就是在vuex當(dāng)中增加適配層。因?yàn)関uex可提供異步請求、數(shù)據(jù)存取的能力，甚至可以進(jìn)行數(shù)據(jù)的統(tǒng)一格式化（getters）,從而提供給視圖穩(wěn)定的數(shù)據(jù)結(jié)構(gòu)。

下面以頁面中的shop模塊為例，看看整個(gè)數(shù)據(jù)適配的流程及優(yōu)點(diǎn)，該模塊的視圖如下：

圖一 shop視圖在頁面中的展現(xiàn)

該業(yè)務(wù)模塊動(dòng)態(tài)加載，加載邏輯：當(dāng)后臺(tái)數(shù)據(jù)返回了相應(yīng)的shopInfo屬性時(shí)，展現(xiàn)，否則不展現(xiàn)?？纯丛嫉臄?shù)據(jù)結(jié)構(gòu)：

{result: {productAllVo: {productReal: {shopInfo: {productNum: 123,logoImgUrl: '149179710440827259.jpg',favorited: false},shopName: '\u5e97\u94fa\u540d\u79f0'},shopId: '123'}} }

發(fā)現(xiàn)shop視圖所需的數(shù)據(jù)，并沒有完全在一個(gè)數(shù)據(jù)結(jié)構(gòu)當(dāng)中，而是分散的。

shop模塊的數(shù)據(jù)適配過程

• step1：定義視圖所需的原始數(shù)據(jù)結(jié)構(gòu)，并進(jìn)行初始化；

// vuex a.js const state = {initData: {shop: {isShow: false, // 是否展現(xiàn)店鋪isCollected: false, // 是否收藏id: 0,productTotal: 0,logo: '', // 店鋪logoname: '', // 店鋪名稱}},interactData: {} }

vuex的state屬性，提供initData與interactData兩個(gè)部分，其中的initData存儲(chǔ)頁面初始化數(shù)據(jù)，而interactData存儲(chǔ)頁面的交互狀態(tài)。初始化數(shù)據(jù)一般設(shè)置葉子屬性的默認(rèn)值，從而避免多級(jí)調(diào)用的時(shí)候，報(bào)錯(cuò)。如調(diào)用state.initData.shop.id，在不確定的情況下需要一級(jí)一級(jí)的進(jìn)行空值判斷，代碼又臭又長：

if (state && state.initData && state.initData.shop) {let id = state.initData.shop.id}

而經(jīng)過葉子屬性默認(rèn)值設(shè)置的調(diào)用，將省去層層判斷。特別是vue數(shù)據(jù)驅(qū)動(dòng)的視圖情況下，視圖中調(diào)用，常常會(huì)發(fā)生空值調(diào)用錯(cuò)誤，如此操作，便可避免。

通過定義初始化數(shù)據(jù)結(jié)構(gòu)，將容錯(cuò)、展現(xiàn)判斷邏輯融入數(shù)據(jù)結(jié)構(gòu)當(dāng)中，相應(yīng)視圖組件，只需要關(guān)注初始化定義中的數(shù)據(jù)結(jié)構(gòu)，從而簡化了數(shù)據(jù)流的來源和處理。

• step2：使用action獲取后臺(tái)原始數(shù)據(jù)；

// actions 數(shù)據(jù)接口管理 const actions = {// 獲取初始化的產(chǎn)品數(shù)據(jù)getProductData({commit}, params) {return new Promise((resolve, reject) => {getReactDetailInfo(params).then(({success, result}) => {if (success) {let {productAllVo: {productType}} = resultif (productType == 'real') {// mutation方法，存入state中commit('initShop', result)resolve(data)} else {resolve(productType)}} else {reject()}})})}

通過調(diào)用action中的方法，獲取后臺(tái)數(shù)據(jù)，并通過mutations的方法，將數(shù)據(jù)存入state中。

• step3： 使用mutations將數(shù)據(jù)存入state中

// mutations 狀態(tài)轉(zhuǎn)換 和 數(shù)據(jù)適配 const mutations = {// 初始化數(shù)據(jù)處理 店鋪數(shù)據(jù)initShop(state, product) {let {productAllVo: {shopId,productReal: {shopName,shopInfo}}} = product// shopInfo為非必需let isShow = Boolean(shopInfo)let {logoImgUrl,favorited,productNum} = !shopInfo ? {} : shopInfo// 存stateObject.assign(state.initData.shop, {isCollected: Boolean(favorited), // 是否收藏id: shopId,logo: logoImgUrl ? formatImg(logoImgUrl) : state.defaultData.defaultShopLogo, // 店鋪logoname: shopName, // 店鋪名稱type: extType, // JD京東商品isShow,productTotal: toNumber(productNum)})} }

如此，便實(shí)現(xiàn)了數(shù)據(jù)的適配，當(dāng)數(shù)據(jù)結(jié)構(gòu)發(fā)生變化時(shí)，只需在step3當(dāng)中，修改獲取數(shù)據(jù)結(jié)構(gòu)，和數(shù)據(jù)賦值部分便可。如數(shù)據(jù)結(jié)構(gòu)及數(shù)據(jù)名稱發(fā)生調(diào)整，
shopIdresult.productAllVo.shopId -> result.productAllVo.productReal.shopInfo.id
則step3變成：

圖2 數(shù)據(jù)結(jié)構(gòu)變化對應(yīng)的數(shù)據(jù)提取變化
其中，僅id的提取位置，名稱，賦值名稱發(fā)生變化。而對應(yīng)視圖，完全可以不用改變，容錯(cuò)，測試更是省略。so easy~~~

總結(jié)：

數(shù)據(jù)適配的流程：

• step1：數(shù)據(jù)初始化定義；
• step2：原始數(shù)據(jù)請求；
• step3：數(shù)據(jù)提取與容錯(cuò)處理；
• step4：數(shù)據(jù)調(diào)用。最后的數(shù)據(jù)調(diào)用方法省略，在視圖中，可隨意調(diào)用，結(jié)合getters可以實(shí)現(xiàn)多處調(diào)用的格式化（數(shù)據(jù)共享），結(jié)合mapState等方法，可以使代碼更為簡潔。

優(yōu)點(diǎn)：

• a、數(shù)據(jù)初始化結(jié)構(gòu)與視圖所需結(jié)構(gòu)完全吻合，命名由前端自定義規(guī)范，不受后端數(shù)據(jù)的影響；
• b、可簡化視圖數(shù)據(jù)的容錯(cuò)過程，在數(shù)據(jù)適配中調(diào)整；
• c、當(dāng)接口發(fā)生變化時(shí)，只需非常少的成本調(diào)整數(shù)據(jù)，不在需要反復(fù)的確認(rèn)、測試等等；
• d、便于數(shù)據(jù)結(jié)構(gòu)新老交替，當(dāng)組件升級(jí)或者數(shù)據(jù)結(jié)構(gòu)升級(jí)時(shí)，可很方便提供兼容數(shù)據(jù)結(jié)構(gòu)。

tips：可根據(jù)業(yè)務(wù)模塊的需要，將初始化數(shù)據(jù)放在合適的位置［如業(yè)務(wù)進(jìn)入頁面的位置等］

轉(zhuǎn)載于:https://www.cnblogs.com/hity-tt/p/7795288.html

總結(jié)

以上是生活随笔為你收集整理的vuex数据管理－数据适配的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。