Reflux Vue

A mixin helpers link the Reflux and the Vue

Usages

most usages are same as Reflux, only the mixins for Vue component have little differences.

import Reflux from 'reflux-vue'

Convenience mixin for React

const vm = new Vue({

  mixins: [Reflux.ListenerMixin],
  
  compiled() {
    this.listenTo(TheStore, this.onStoreUpdate);
  },
    
  methods {
    onStoreUpdate(state){
      // update the data of TheStore to vm
      this.state = state;
    }
  }
});

Using Reflux.listenTo

const vm = new Vue({
  mixins: [
    Reflux.listenTo(TheStore, 'onStoreUpdate')
  ],
  
  methods {
    onStoreUpdate(state){
      this.state = state;
      // or 
    }
  }
});

Using Reflux.connect

For connect method, we prefer to set the getInitialState to initial the data structure which need to sync.

const TheStore = Reflux.createStore({
  getInitialState: function() {
    return { 
      state: 'open'
    }
  },
  
  onSomeActionCallback(){
    this.trigger({ 
      state: 'open' 
    })
  }
});

const vm = new Vue({
  mixins: [
    Reflux.connect(TheStore)
  ],
    
  methods:{
    getStateFromTheStore(){
      // this.state === 'open'
    }
  }
});

Using Reflux.connectFilter

const vm = new Vue({
  mixins: [
    Reflux.connectFilter(TheStore, function(stateData) {
      return {
        state: stateData.state === 'open' ? 'open!!!' : ''
      }
    }))
  ],
    
  methods:{
    getStateFromTheStore(){
      // this.state === 'open!!!'
    }
  }
});