Navel Pondering Mantra

    revue

    3.0.0 • Public • Published

    Revue

    NPM version Build Status donate

    Learn Redux before using Revue. That would help you get rid of JavaScript fatigue, sort of.

    Usage

    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/dist/revue.js, Revue is exposed to window object.

    The Gist

    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 When creating a Vue component that needs to react to data from Redux's store, you must specify the bindings between the data of the component and the data in the store. The following is an example of binding the data todo in the component with store.getState().todos by using the special function this.$select('todos').

    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))
        }
      }
    }

    More detailed usages

    Recipes 🍳

    Development

    • npm test run unit test
    • npm run example run webpack example

    License

    MIT © EGOIST

    Keywords

    none

    Install

    npm i revue

    DownloadsWeekly Downloads

    147

    Version

    3.0.0

    License

    MIT

    Last publish

    Collaborators

    • kchan
    • rem
    • simplesmiler