Learn Redux before using Revue. That would help you get rid of JavaScript fatigue, sort of.
Obviously it works with Redux, install via NPM: npm i --save redux revue
You can also hot-link the CDN version: https://npmcdn.com/revue/revue.js, Revue
is exposed to window
object.
You can try it online! http://esnextb.in/?gist=b300931ac26da8e9de2f
store.js
import Vue from 'vue'
import Revue from 'revue'
import {createStore} from 'redux'
// create the logic how you would update the todos
import todos from './reducers/todos'
// create some redux actions
import actions from './actions'
// create a redux store
const reduxStore = createStore(todos)
// binding the store to Vue instance, actions are optional
const store = new Revue(Vue, reduxStore, actions)
// expose the store for your component to use
export default store
actions/todos.js
// create actionCreators yourself or use `redux-actions`
export function addTodo(payload) {
return {type: 'ADD_TODO', payload}
}
export function toggleTodo(payload) {
return {type: 'TOGGLE_TODO', payload}
}
component.js
import store from './store'
import * as todoActions from './actions/todo'
export default {
data() {
return {
todo: '',
todos: this.$select('todos')
//=> subscribe state.todos to vm.todos
// if prop is not in top level
// do this.$select('todos as path.to.todos')
}
},
methods: {
addTodo() {
store.dispatch({type: 'ADD_TODO', this.todo})
// or use the actionCreator
store.dispatch(todoActions.addTodo(this.todo))
// also equal to: (if you binded actions when creating the store)
const {addTodo} = store.actions
store.dispatch(addTodo(this.todo))
}
}
}
Recipes ๐ณ
- npm test run unit test
- npm run watch build example
- serve example serve example
- make publish publish a new version
- npm run cjs build in CommonJS format
- npm run umd build in umd format
- npm run demo to publish demo to surge
MIT ยฉ EGOIST