# vuex-router-sync

> Effortlessly keep vue-router and vuex store in sync.

Latest version **5.0.0** (published 2017-10-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install vuex-router-sync
pnpm add vuex-router-sync
yarn add vuex-router-sync
bun add vuex-router-sync
```

## Health

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

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

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 5.0.0 |
| Published | 2017-10-12 |
| First published | 2016-03-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2490 |
| Author | Evan You |
| Maintainers | yyx990803 |
| Keywords | vuex, vue-router, vue |

## Links

- npm: https://www.npmjs.com/package/vuex-router-sync
- Repository: https://github.com/vuejs/vuex-router-sync
- Homepage: https://github.com/vuejs/vuex-router-sync#readme
- Issues: https://github.com/vuejs/vuex-router-sync/issues
- npm.io page: https://npm.io/package/vuex-router-sync

## Alternatives

- [express-promise-router](https://npm.io/package/express-promise-router.md) — 736.1K weekly downloads
- [next-usequerystate](https://npm.io/package/next-usequerystate.md) — 29.8K weekly downloads
- [@bitkyc08/opencodex](https://npm.io/package/@bitkyc08/opencodex.md) — 4.6K weekly downloads
- [lynkr](https://npm.io/package/lynkr.md) — 575 weekly downloads
- [baremetal.js](https://npm.io/package/baremetal.js.md) — 42 weekly downloads

## Recent versions

- 5.0.0 (latest) — 2017-10-12
- 6.0.0-rc.1 (next) — 2021-02-05
- 4.3.2 — 2017-09-18
- 4.3.1 — 2017-09-05
- 4.3.0 — 2017-09-01
- 4.2.0 — 2017-06-02
- 4.1.3 — 2017-05-25
- 4.1.2 — 2017-01-25
- 4.1.1 — 2017-01-17
- 4.1.0 — 2017-01-02
- 4.0.2 — 2016-12-21
- 4.0.1 — 2016-12-14
- 4.0.0 — 2016-12-14
- 2.1.1 — 2016-09-15
- 2.1.0 — 2016-08-05
- … 5 more at https://npm.io/package/vuex-router-sync/versions

## README

# vuex-router-sync [![CircleCI](https://circleci.com/gh/vuejs/vuex-router-sync.svg?style=svg)](https://circleci.com/gh/vuejs/vuex-router-sync)

> Sync vue-router's current $route as part of vuex store's state.

### Usage

``` bash
# the latest version works only with vue-router >= 2.0
npm install vuex-router-sync

# for usage with vue-router < 2.0:
npm install vuex-router-sync@2
```

``` js
import { sync } from 'vuex-router-sync'
import store from './vuex/store' // vuex store instance
import router from './router' // vue-router instance

const unsync = sync(store, router) // done. Returns an unsync callback fn

// bootstrap your app...

// During app/Vue teardown (e.g., you only use Vue.js in a portion of your app and you 
// navigate away from that portion and want to release/destroy Vue components/resources)
unsync() // Unsyncs store from router
```

You can optionally set a custom vuex module name:

```js
sync(store, router, { moduleName: 'RouteModule' } )
```

### How does it work?

- It adds a `route` module into the store, which contains the state representing the current route:

  ``` js
  store.state.route.path   // current path (string)
  store.state.route.params // current params (object)
  store.state.route.query  // current query (object)
  ```

- When the router navigates to a new route, the store's state is updated.

- **`store.state.route` is immutable, because it is derived state from the URL, which is the source of truth**. You should not attempt to trigger navigations by mutating the route object. Instead, just call `$router.push()` or `$router.go()`. Note that you can do `$router.push({ query: {...}})` to update the query string on the current path.

### License

[MIT](http://opensource.org/licenses/MIT)

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