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.

1import Reflux from 'reflux-vue'

Convenience mixin for React

1const vm = new Vue({
2
3  mixins: [Reflux.ListenerMixin],
4  
5  compiled() {
6    this.listenTo(TheStore, this.onStoreUpdate);
7  },
8    
9  methods {
10    onStoreUpdate(state){
11      // update the data of TheStore to vm
12      this.state = state;
13    }
14  }
15});

Using Reflux.listenTo

1const vm = new Vue({
2  mixins: [
3    Reflux.listenTo(TheStore, 'onStoreUpdate')
4  ],
5  
6  methods {
7    onStoreUpdate(state){
8      this.state = state;
9      // or 
10    }
11  }
12});

Using Reflux.connect

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

1const TheStore = Reflux.createStore({
2  getInitialState: function() {
3    return { 
4      state: 'open'
5    }
6  },
7  
8  onSomeActionCallback(){
9    this.trigger({ 
10      state: 'open' 
11    })
12  }
13});
14

1const vm = new Vue({
2  mixins: [
3    Reflux.connect(TheStore)
4  ],
5    
6  methods:{
7    getStateFromTheStore(){
8      // this.state === 'open'
9    }
10  }
11});

Using Reflux.connectFilter

1const vm = new Vue({
2  mixins: [
3    Reflux.connectFilter(TheStore, function(stateData) {
4      return {
5        state: stateData.state === 'open' ? 'open!!!' : ''
6      }
7    }))
8  ],
9    
10  methods:{
11    getStateFromTheStore(){
12      // this.state === 'open!!!'
13    }
14  }
15});