vuex-connect
vuex-connect v1 no longer supports Vuex <= v1. If you want to use with Vuex v2, 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
: ObjectstateToProps
gettersToProps
actionsToProps
actionsToEvents
mutationsToProps
mutationsToEvents
methodsToProps
methodsToEvents
lifecycle
componentName
: stringComponent
: Vue component or component optionWrapperComponent
: 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