由于接口在上線前，不可避免的會出現變動，小則屬性名變，大則結構變化。如果處理不當，結構變化時，視圖的代碼也需要做相應的更改，然后就是容錯方法的變動，接著重新自測等，這樣，變化成本隨著結構的復雜度大大加深。如何適應這種變化，從而提供一種穩定的數據結構供視圖使用，提升開發、協作效率呢？

答案就是在vuex當中增加適配層。因為vuex可提供異步請求、數據存取的能力，甚至可以進行數據的統一格式化（getters）,從而提供給視圖穩定的數據結構。

下面以頁面中的shop模塊為例，看看整個數據適配的流程及優點，該模塊的視圖如下：

圖一 shop視圖在頁面中的展現

該業務模塊動態加載，加載邏輯：當后臺數據返回了相應的shopInfo屬性時，展現，否則不展現。看看原始的數據結構：

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

發現shop視圖所需的數據，并沒有完全在一個數據結構當中，而是分散的。

shop模塊的數據適配過程

• step1：定義視圖所需的原始數據結構，并進行初始化；

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

vuex的state屬性，提供initData與interactData兩個部分，其中的initData存儲頁面初始化數據，而interactData存儲頁面的交互狀態。初始化數據一般設置葉子屬性的默認值，從而避免多級調用的時候，報錯。如調用state.initData.shop.id，在不確定的情況下需要一級一級的進行空值判斷，代碼又臭又長：

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

而經過葉子屬性默認值設置的調用，將省去層層判斷。特別是vue數據驅動的視圖情況下，視圖中調用，常常會發生空值調用錯誤，如此操作，便可避免。

通過定義初始化數據結構，將容錯、展現判斷邏輯融入數據結構當中，相應視圖組件，只需要關注初始化定義中的數據結構，從而簡化了數據流的來源和處理。

• step2：使用action獲取后臺原始數據；

// actions 數據接口管理 const actions = {// 獲取初始化的產品數據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()}})})}

通過調用action中的方法，獲取后臺數據，并通過mutations的方法，將數據存入state中。

• step3： 使用mutations將數據存入state中

// mutations 狀態轉換 和 數據適配 const mutations = {// 初始化數據處理 店鋪數據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)})} }

如此，便實現了數據的適配，當數據結構發生變化時，只需在step3當中，修改獲取數據結構，和數據賦值部分便可。如數據結構及數據名稱發生調整，
shopIdresult.productAllVo.shopId -> result.productAllVo.productReal.shopInfo.id
則step3變成：

圖2 數據結構變化對應的數據提取變化
其中，僅id的提取位置，名稱，賦值名稱發生變化。而對應視圖，完全可以不用改變，容錯，測試更是省略。so easy~~~

總結：

數據適配的流程：

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

優點：

• a、數據初始化結構與視圖所需結構完全吻合，命名由前端自定義規范，不受后端數據的影響；
• b、可簡化視圖數據的容錯過程，在數據適配中調整；
• c、當接口發生變化時，只需非常少的成本調整數據，不在需要反復的確認、測試等等；
• d、便于數據結構新老交替，當組件升級或者數據結構升級時，可很方便提供兼容數據結構。

tips：可根據業務模塊的需要，將初始化數據放在合適的位置［如業務進入頁面的位置等］

轉載于:https://www.cnblogs.com/hity-tt/p/7795288.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。