# vuex-connect

> A binding utility for a Vue component and a Vuex store.

Latest version **2.2.0** (published 2018-11-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install vuex-connect
pnpm add vuex-connect
yarn add vuex-connect
bun add vuex-connect
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.2.0 |
| Published | 2018-11-27 |
| First published | 2016-04-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 40.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 250 |
| Author | katashin |
| Maintainers | ktsn |
| Keywords | vue, vuex, helper, flux, binding, container |

## Links

- npm: https://www.npmjs.com/package/vuex-connect
- Repository: https://github.com/ktsn/vuex-connect
- Issues: https://github.com/ktsn/vuex-connect/issues
- npm.io page: https://npm.io/package/vuex-connect

## Alternatives

- [lodash.assign](https://npm.io/package/lodash.assign.md) — 2.3M weekly downloads
- [lodash.chunk](https://npm.io/package/lodash.chunk.md) — 1.8M weekly downloads
- [react-native-ios-utilities](https://npm.io/package/react-native-ios-utilities.md) — 138.5K weekly downloads
- [@technically/lodash](https://npm.io/package/@technically/lodash.md) — 50.9K weekly downloads
- [@fluid-topics/ft-icon](https://npm.io/package/@fluid-topics/ft-icon.md) — 20.6K weekly downloads

## Recent versions

- 2.2.0 (latest) — 2018-11-27
- 2.1.1 — 2018-10-09
- 2.1.0 — 2018-04-09
- 2.0.3 — 2018-01-16
- 2.0.2 — 2018-01-16
- 2.0.1 — 2017-12-23
- 2.0.0 — 2017-11-03
- 1.3.1 — 2017-09-10
- 1.3.0 — 2017-09-10
- 1.2.0 — 2017-03-19
- 1.1.2 — 2016-11-18
- 1.1.1 — 2016-10-22
- 1.1.0 — 2016-09-05
- 1.0.0 — 2016-08-20
- 0.4.0 — 2016-07-28
- … 11 more at https://npm.io/package/vuex-connect/versions

## README

# vuex-connect

[![npm version](https://badge.fury.io/js/vuex-connect.svg)](https://badge.fury.io/js/vuex-connect)
[![Build Status](https://travis-ci.org/ktsn/vuex-connect.svg?branch=travis)](https://travis-ci.org/ktsn/vuex-connect)

A binding utility for a Vue component and a Vuex store.  
Inspired by [react-redux](https://github.com/reactjs/react-redux)'s `connect` function.

## Example

First, create a Vue component. This component can communicate to a parent component using events and recieve data from the parent through props.

```js
// 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`.  
The `connect` function wraps the component, returning a new wrapper component.

```js
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: {
    mounted: ({ 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.

```js
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: {
    mounted: 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 the same interface as 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 that they will be passed to the wrapped component's props. For example, the following option retrieves a store's state via the `inputMessage` getter and passes it to the `message` prop of the wrapped component.

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

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

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

`lifecycle` is [lifecycle hooks](https://vuejs.org/api/#Options-Lifecycle-Hooks) for a Vue component.
The lifecycle hooks receive a 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 a `string`. It is useful to specify the component in the debug phase.

### `createConnect(fn) -> ConnectFunction`

Creates a customized `connect` function. `fn` is transform function of the wrapper component options and will receive a component options object and a lifecycle option of the connect function. You may want to inject some additional lifecycle hooks in `fn`.

Example of defining `vue-router` lifecycle hooks:

```js
// connect.js
import { createConnect } from 'vuex-connect'

export const connect = createConnect((options, lifecycle) => {
  options.beforeRouteEnter = lifecycle.beforeRouteEnter

  options.beforeRouteUpdate = function(to, from, next) {
    return lifecycle.beforeRouteUpdate.call(this, this.store, to, from, next)
  }

  options.beforeRouteLeave = function(to, from, next) {
    return lifecycle.beforeRouteLeave.call(this, this.store, to, from, next)
  }
})
```

It can be used as:

```js
import { connect } from './connect'
import { Example } from './example'

export default connect({
  lifecycle: {
    beforeRouteEnter(to, from, next) {
      // ...
    },

    beforeRouteUpdate(store, to, from, next) {
      // ...
    },

    beforeRouteLeave(store, to, from, next) {
      // ...
    }
  }
})('example', Example)
```

## License

MIT

---
_Source: https://npm.io/package/vuex-connect · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._