1 | # vuex-router-sync
|
2 |
|
3 | > Effortlessly keep vue-router and vuex store in sync.
|
4 |
|
5 | **Note:** requires `vuex>=0.6.2`.
|
6 |
|
7 | ### Usage
|
8 |
|
9 | ``` bash
|
10 | npm install vuex-router-sync
|
11 | ```
|
12 | ``` js
|
13 | import { sync } from 'vuex-router-sync'
|
14 | import store from './vuex/store' // vuex store instance
|
15 | import router from './router' // vue-router instance
|
16 |
|
17 | sync(store, router) // done.
|
18 |
|
19 | // bootstrap your app...
|
20 | ```
|
21 |
|
22 | ### How does it work?
|
23 |
|
24 | - It adds a `route` module into the store, which contains the state representing the current route:
|
25 |
|
26 | ``` js
|
27 | store.state.route.path // current path (string)
|
28 | store.state.route.params // current params (object)
|
29 | store.state.route.query // current query (object)
|
30 | ```
|
31 |
|
32 | - When the router navigates to a new route, the store's state is updated.
|
33 |
|
34 | - **`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.go()`. Note that you can do `$router.go({ query: {...}})` to update the query string on the current path.
|
35 |
|
36 | ### License
|
37 |
|
38 | [MIT](http://opensource.org/licenses/MIT)
|
39 |
|
\ | No newline at end of file |