vuex-connect

vuex-connect v1 no longer supports Vuex <= v1. If you want to use with Vuex v1, please use vuex-connect v0.x

A binding utility for a Vue component and a Vuex store.
Inspired by react-redux's connect function.

Example

First, you should create a Vue component. The component should communicate a parent component by using props and events.

// hello-component.js
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  },
  methods: {
    updateMessage(event) {
      this.$emit('update', event.target.value)
    }
  },
  template: `
  <div>
    <p>{{ message }}</p>
    <input type="text" :value="message" @input="updateMessage">
  </div>
  `
}

You can bind the component and the Vuex store by vuex-connect.
connect function wraps the component and create a new wrapper component.

import { connect } from 'vuex-connect'
import HelloComponent from './hello-component'

export default connect({
  stateToProps: {
    message: state => state.message
  },

  methodsToEvents: {
    update: ({ commit }, value) => commit('UPDATE_INPUT', value)
  },

  lifecycle: {
    ready: ({ commit }) => {
      fetch(URL)
        .then(res => res.text())
        .then(value => commit('UPDATE_INPUT', value));
    }
  }
})('hello', HelloComponent)

You can use getters, actions and mutations if you define them in your store.

import { connect } from 'vuex-connect'
import HelloComponent from './hello-component'

export default connect({
  gettersToProps: {
    message: 'inputMessage' // 'prop name': 'getter name'
  },

  mutationsToEvents: {
    update: 'UPDATE_INPUT' // 'event name': 'mutation type'
  },

  lifecycle: {
    ready: store => store.dispatch('FETCH_INPUT', URL)
  }
})('hello', HelloComponent)

API

connect(options) -> (componentName, Component) -> WrapperComponent

• options: Object
  • stateToProps
  • gettersToProps
  • actionsToProps
  • actionsToEvents
  • mutationsToProps
  • mutationsToEvents
  • methodsToProps
  • methodsToEvents
  • lifecycle
• componentName: string
• Component: Vue component or component option
• WrapperComponent: Vue component

Connects a Vue component to a Vuex store.

stateToProps, gettersToProps, actionsTo(Props|Events) and mutationsTo(Props|Events) have same interface of Vuex's mapState, mapGetters, mapActions and mapMutations. In addition, you can define inline methods by using methodsTo(Props|Events).

The options suffixed by Props indicate they will be pass to the wrapped component's props. For example, following option retrieve a store state via inputMessage getter and pass it to message prop of the wrapped component.

connect({
  gettersToProps: {
    message: 'inputMessage'
  }
})

The options suffixed by Events indicate they will listen the wrapped component's events. For example, following option observes the update event of wrapped component and if it is emitted, UPDATE_INPUT mutation is committed.

connect({
  mutationsToEvents: {
    update: 'UPDATE_INPUT'
  }
})

lifecycle is lifecycle hooks for a Vue component. The lifecycle hooks receives Vuex store for their first argument. You can dispatch some actions or mutations in the lifecycle hooks.

connect returns another function. The function expects a component name and the component constructor. The component name should be string and it is useful to specify the component on debug phase.

License

MIT