{"id":13432851,"url":"https://github.com/vuejs/vuex-router-sync","last_synced_at":"2025-05-13T19:08:57.846Z","repository":{"id":5535820,"uuid":"53403865","full_name":"vuejs/vuex-router-sync","owner":"vuejs","description":"Effortlessly keep vue-router and vuex store in sync.","archived":false,"fork":false,"pushed_at":"2022-01-08T14:55:22.000Z","size":412,"stargazers_count":2510,"open_issues_count":11,"forks_count":126,"subscribers_count":47,"default_branch":"master","last_synced_at":"2025-04-11T13:50:51.842Z","etag":null,"topics":["vue","vue-router","vuex"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vuejs.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-03-08T10:32:28.000Z","updated_at":"2025-04-11T01:51:27.000Z","dependencies_parsed_at":"2022-08-06T19:00:24.179Z","dependency_job_id":null,"html_url":"https://github.com/vuejs/vuex-router-sync","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vuejs%2Fvuex-router-sync","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vuejs%2Fvuex-router-sync/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vuejs%2Fvuex-router-sync/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vuejs%2Fvuex-router-sync/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vuejs","download_url":"https://codeload.github.com/vuejs/vuex-router-sync/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249867470,"owners_count":21337194,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["vue","vue-router","vuex"],"created_at":"2024-07-31T02:01:17.545Z","updated_at":"2025-04-27T04:46:22.522Z","avatar_url":"https://github.com/vuejs.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Libraries and Plugins"],"sub_categories":["Other"],"readme":"# Vuex Router Sync\n\n[![npm](https://img.shields.io/npm/v/vuex-router-sync.svg)](https://npmjs.com/package/vuex-router-sync)\n[![ci status](https://github.com/vuejs/vuex-router-sync/workflows/test/badge.svg)](https://github.com/vuejs/vuex-router-sync/actions)\n[![coverage](https://codecov.io/gh/vuejs/vuex-router-sync/branch/master/graph/badge.svg?token=4KJug3I5do)](https://codecov.io/gh/vuejs/vuex-router-sync)\n[![license](https://img.shields.io/npm/l/vuex-router-sync.svg?sanitize=true)](http://opensource.org/licenses/MIT)\n\nSync Vue Router's current `$route` as part of Vuex store's state.\n\n[中文版本 (Chinese Version)](README.zh-cn.md)\n\n## Usage\n\n``` bash\n# the latest version works only with vue-router \u003e= 2.0\nnpm install vuex-router-sync\n\n# for usage with vue-router \u003c 2.0:\nnpm install vuex-router-sync@2\n```\n\n``` js\nimport { sync } from 'vuex-router-sync'\nimport store from './store' // vuex store instance\nimport router from './router' // vue-router instance\n\nconst unsync = sync(store, router) // done. Returns an unsync callback fn\n\n// bootstrap your app...\n\n// During app/Vue teardown (e.g., you only use Vue.js in a portion of your app\n// and you navigate away from that portion and want to release/destroy\n// Vue components/resources)\nunsync() // Unsyncs store from router\n```\n\nYou can optionally set a custom vuex module name:\n\n```js\nsync(store, router, { moduleName: 'RouteModule' } )\n```\n\n## How does it work?\n\n- It adds a `route` module into the store, which contains the state representing the current route:\n\n  ``` js\n  store.state.route.path   // current path (string)\n  store.state.route.params // current params (object)\n  store.state.route.query  // current query (object)\n  ```\n\n- When the router navigates to a new route, the store's state is updated.\n\n- **`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.\n\n## License\n\n[MIT](http://opensource.org/licenses/MIT)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvuejs%2Fvuex-router-sync","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvuejs%2Fvuex-router-sync","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvuejs%2Fvuex-router-sync/lists"}