简易的setData一个数据

做小程序的时候难免会遇到经常切换一个按钮或者某个组件的显示与隐藏，一般的写法是 绑定一个函数 去 this.setData({ show : true })
只要有需要切换显示与隐藏的都需要这样写一遍。很麻烦 so…

1 在utils 新建一个文件 pageDecorator.js

import { deepMerge } from './index'
function pageDecorator(params) {
    const originPage = Page
    Page = function (config) {
        config = deepMerge({ $setData, ...params }, config)
        return originPage(config)
    }
}
/**
 * @desc 修改页面data
 * @param {*} e 
 */
function $setData(e) {
    const { key, value } = e.currentTarget.dataset
    this.setData({ [key]: value })
}
export default pageDecorator 

在app.js中全局引入

import pageDecorator from './utils/pageDecorator'

  onLaunch() {
    pageDecorator()
    }

这样就可以在任意页面上传递参数后设置一个值的 true 或者 false 了

<view bindtap="$setData" data-key="showMenu" data-value="{{!showMenu}}">
    <button>取反</button>
</view>
<view bindtap="$setData" data-key="showMenu" data-value="{{true}}">
    <button>setTrue</button>
</view>

deepMerge 代码

/**
 * 深度合并两个对象
 * @param obj1
 * @param obj2
 * @returns {*}
 */
function deepMerge(obj1, obj2) {
  obj1 = deepClone(obj1)
  Object.keys(obj2).forEach(key => {
    obj1[key] = obj1[key] && obj1[key].toString() === "[object Object]" &&
      (obj2[key] && obj2[key].toString() === "[object Object]")
      ? deepMerge(obj1[key], obj2[key])
      : (obj1[key] = obj2[key]);
  })
  return obj1;
}