vuex数据管理－数据适配

由于接口在上线前，不可避免的会出现变动，小则属性名变，大则结构变化。如果处理不当，结构变化时，视图的代码也需要做相应的更改，然后就是容错方法的变动，接着重新自测等，这样，变化成本随着结构的复杂度大大加深。如何适应这种变化，从而提供一种稳定的数据结构供视图使用，提升开发、协作效率呢？

答案就是在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数据管理－数据适配的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。