Vue Data Proxy for Promises

by mgoetzke

HTML

<script src="https://vuejs.org/js/vue.min.js"></script>
<div id="demo">
  <p>{{message}}</p>
  <input v-model="message">
  <component is="my-com"></component>
</div>

JavaScript

var com = {
  name: 'my-com',
  template: `<div><h1>test</h1>
  <p><button @click="incA">++</button> a = {{locals.a}} </p>
  <p><button @click="incB">++</button> b = {{locals.b}} </p>
  <p><button @click="incRA">++</button> a* = {{reactiveLocals.a}} </p>
  <p><button @click="incRB">++</button> b* = {{reactiveLocals.b}} </p>
  </div>`,
  data() {
    const locals = {
      a: 0
    }
    const localsOther = {
      a: 0
    }

    return {
      locals,
      reactiveLocals: makeReactive(localsOther)
    }
  },
  created() {
    setTimeout(() => {
      this.locals.b = 2
      this.reactiveLocals.b = 2
    }, 10)
  },
  methods: {
    incA() {
        this.locals.a++
      },
      incRA() {
        this.reactiveLocals.a++
      },
      incB() {
        this.locals.b++
      },
      incRB() {
        this.reactiveLocals.b++
      }
  }
}

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms))
}

Vue.component(com.name, com)

var data = {
  message: 'Hello Vue.js!'
}

var demo = new Vue({
  el: '#demo',
  data: {
    message: 'Hello'
  }
})


function makeReactive(object) {
  const target = object
  const handler = {
    get(target, key) {
        if (target.hasOwnProperty(key)) {
          return target[key]
        }
        return null
      },
      set(target, key, value) {
        if (target.hasOwnProperty(key)) {
          target[key] = value
        } else {
          Vue.set(target, key, value)
        }
      }
  }

  const proxy = new Proxy(target, handler)
  return proxy
}