https://github.com/morlay/reflux-vue
https://github.com/morlay/reflux-vue
Last synced: 12 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/morlay/reflux-vue
- Owner: morlay
- Created: 2015-09-15T08:17:33.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2015-09-15T09:07:50.000Z (almost 11 years ago)
- Last Synced: 2024-04-23T17:07:06.036Z (about 2 years ago)
- Language: JavaScript
- Size: 125 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: Readme.md
Awesome Lists containing this project
README
# Reflux Vue
A mixin helpers link the [Reflux](https://github.com/reflux/reflux-core) and the [Vue](https://github.com/yyx990803/vue)
[](https://travis-ci.org/morlay/reflux-vue)
[](https://coveralls.io/r/morlay/reflux-vue)
## Usages
most usages are same as [Reflux](https://github.com/reflux/refluxjs), only the mixins for Vue component have little differences.
``` js
import Reflux from 'reflux-vue'
```
### Convenience mixin for React
``` js
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
``` js
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.
``` js
const TheStore = Reflux.createStore({
getInitialState: function() {
return {
state: 'open'
}
},
onSomeActionCallback(){
this.trigger({
state: 'open'
})
}
});
```
``` js
const vm = new Vue({
mixins: [
Reflux.connect(TheStore)
],
methods:{
getStateFromTheStore(){
// this.state === 'open'
}
}
});
```
### Using Reflux.connectFilter
``` js
const vm = new Vue({
mixins: [
Reflux.connectFilter(TheStore, function(stateData) {
return {
state: stateData.state === 'open' ? 'open!!!' : ''
}
}))
],
methods:{
getStateFromTheStore(){
// this.state === 'open!!!'
}
}
});
```