微信小程序开发小技巧：setState 修改 data 中想修改对象的属性

小程序中，data 是不能直接操作的，需要使用 setData 函数。鉴于微信小程序开发时 setData 的使用体验十分蹩脚，我使用了个库函数 wx-updata，这个库函数在开发的时候对我很有帮助，这里特意推介给大家。

3.1 为什么要使用 wx-updata

你在使用 setData 的时候，是不是有时候觉得很难受，举个简单的例子：

// 你的 data
data: {
    name: '蜡笔小新',
    info: { height: 140, color: '黄色' }
}

如果要修改 info.height 为 155，使用 setData 要怎么做呢：

// 这样会把 info 里其他属性整不见了
this.setData({ info: { height: 155 } })

// 你需要取出 info 对象，修改后整个 setData
const { info } = this.data
info.height = 155
this.setData({ info })

似乎并不太复杂，但如果 data 是个很大的对象，要把比较深且不同的对象、数组项挨个改变：

data: {
    name: '蜡笔小新',
    info: {
        height: 140, color: '黄色',
        desc: [{ age: 8 }, '最喜欢大象之歌', '靓仔', { dog: '小白', color: '白色' }]
    }
}

比如某个需求，需要把 info.height 改为 155，同时改变 info.desc 数组的第 0 项的 age 为 12，第 3 项的 color 为灰色呢？

// 先取出要改变的对象，改变数字后 setData 回去
const { info } = this.data
info.height = 155
info.desc[0].age = 12
info.desc[3].color = '灰色'
this.setData({ info })

// 或者像某些文章里介绍的，这样可读性差，也不太实用
this.setData({
    'info.height': 155,
    'info.desc[0].age': 12,
    'info.desc[3].color': '灰色'
})

上面这两种方法，是我们平常小程序里经常用的，和其他 Web 端的框架相比，就很蹩脚，一种浓浓的半成品感扑面而来，有没有这样一个方法：

this.upData({
    info: {
        height: 155,
        desc: [{ age: 12 }, , , { color: '灰色' }]
    }
})

这个方法会帮我们深度改变嵌套对象里对应的属性值，跳过数组项里不想改变的，只设置我们提供了的属性值、数组项，岂不是省略了一大堆蹩脚的代码，而且可读性也极佳呢。

这就是为什么我在上线的项目中使用 wx-updata，而不是 setData

wx-updata 的原理其实很简单，举个例子：

this.upData({
    info: {
        height: 155,
        desc: [{ age: 12 }]
    }
})

// 会被自动转化为下面这种格式，
// this.setData({
//    'info.height': 155,
//    'info.desc[0].age': 12,
// })

原来这个转化工作是要我们自己手动来做，现在 wx-updata 帮我们做了，岂不美哉！

3.2 wx-updata 使用方式

在一般情况下，我们可以将方法直接挂载到 Page 构造函数上，这样就可以在 Page 实例中像使用 setData 一样使用 upData 了：

// app.js 中挂载
import { updataInit } from './miniprogram_npm/wx-updata/index'  // 你的库文件路径

App({
    onLaunch() {
        Page = updataInit(Page, { debug: true })
    }
})

// 页面代码中使用方式
this.upData({
    info: { height: 155 },
    desc: [{ age: 13 }, '帅哥'],
    family: [, , [, , , { color: '灰色' }]]
})

有的框架可能在 Page 对象上进行了进一步修改，直接替换 Page 的方式可能就不太好了，wx-updata 同样暴露了工具方法，用户可以在页面代码中直接使用工具方法进行处理：

// 页面代码中
import { objToPath } from './miniprogram_npm/wx-updata/index'  // 你的库文件路径

Page({
    data: { a: { b: 2}, c: [3,4,5]},

    // 自己封装一下
    upData(data) {
        return this.setData(objToPath(data))
    },

    // 你的方法中或生命周期函数
    yourMethod() {
        this.upData({ a: { b: 7}, c: [8,,9]})
    }
})

针对修改数组指定项的时候，可能存在的跳过数组空位的情况，wx-updata 提供了 Empty 的 Symbol 类型替位符，还有数组的对象路径方式，感兴趣可以看看 wx-updata 的文档，也可以参考 <开发微信小程序，我为什么放弃 setData，使用 upData> 这篇介绍文章。

另外，使用了 wx-updata 也还可以使用原来的 setData，特别是有时候要清空数组时，灵活使用，可以获得更好的小程序开发体验，祝大家小程序开发愉快 ?