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