【微信小程序】用Proxy实现双向绑定(类Vuex)

自己写的,如有问题欢迎指教

[核心代码]根目录/store.js

// 根目录/store.js
let app = getApp()

const Store = function (obj, useStates = {}) {
  return new Proxy(app.globalData, {
    set(target, key, value) {
      if (Array.isArray(useStates) && useStates.includes(key)) {
        obj.setData({
          [key]: value
        })
      } else if (useStates instanceof Object && useStates.hasOwnProperty(key)) {
        obj.setData({
          [key]: value
        })
      }
      return Reflect.set(target, key, value)
    },
    get(target, key) {
      return Reflect.get(target, key)
    }
  })
}

export const bindStore = function (obj, useStates = {}) {
  let tmpData = {}
  if (Array.isArray(useStates)) {
    for(let i in useStates) {
      tmpData[useStates[i]] = app.globalData[useStates[i]]
    }
    obj.setData(tmpData)
  } else if (useStates instanceof Object) {
    for (let i in useStates) {
      tmpData[i] = app.globalData[useStates[i]]
    }
    obj.setData(tmpData)
  }
  return Store(obj, useStates)
}

【使用说明】

// 直接import bindStore函数
bindStore(
  this, //本页对象	
  ['userInfo'], //使用的state,可为对象,{userInfo1/*本页绑定的名称*/: 'userInfo'/*指向名称*/}
  ['setUserInfo'] //使用的mutation,未添加,有空加,打算把核心代码抽取出来搞
)

【测试代码】根目录下/pages/index/index.wxml

<text>pages/login/index.wxml</text>
<view>{{userInfo.a}}</view>
<navigator url="/pages/logs/logs">走起</navigator>

【测试代码】根目录下/pages/logs/logs.wxml

<text>pages/logs/logs.wxml</text>
<view>{{userInfo.a}}</view>

【测试代码】根目录下/pages/logs/logs.js

// pages/logs/index.js
const util = require('../../utils/util.js')
import { bindStore} from '../../store.js'
Page({
  onLoad: function () {
    let store = bindStore(this,{
      userInfo: 'userInfo'
    })
  }
})

【测试代码】根目录下/pages/login/index.js

// pages/login/index.js
import { bindStore} from '../../store.js'
Page({
  onLoad: function (options) {
    let store = bindStore(this, ['userInfo'])
    let r = ''
    setInterval(() => {
      r += '1'
      store.userInfo = { a: r }
    },1000)
  }
})
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值