counter-function.html

<!-- this demo requires a browser that natively supports ES2015 -->

<script src="https://unpkg.com/xstream/dist/xstream.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="../dist/vue-xs.js"></script>

<div id="app">
  <div>{{ count }}</div>

  <!-- callback declared on streamMethods -->
  <button v-on:click="muchMore(500)">Add 500</button>

  <button v-on:click="minus(minusDelta1)"> Minus on Click </button>

  <pre>{{ $data }}</pre>

</div>

<script>
new Vue({
  el: '#app',

  data () {
    return {
      minusDelta1: -1,
      minusDelta2: -1
    }
  },

  // declare callback Streams
  streamMethods: {
    muchMore: 'muchMore$',
    minus:'minus$'
  }, // equivalent of above: ['muchMore','minus']

  subscriptions () {
    var count$ = xstream.default
      .merge(
      	this.muchMore$,
        this.minus$
      )
      .fold((total, change) => total + change, 0)

    return {
      count: count$
    }
  }
})
</script>