From e28dd02b66809767a9cac59d791e28e0f9279f23 Mon Sep 17 00:00:00 2001 From: Evan You Date: Thu, 30 Jun 2016 16:39:46 -0400 Subject: [PATCH 01/12] readme --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 05bcad8..f9a1006 100644 --- a/README.md +++ b/README.md @@ -31,7 +31,7 @@ sync(store, router) // done. - 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.go()`. +- **`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. ### License From 81195bb02b770068a4deff648cc556b142e2e7df Mon Sep 17 00:00:00 2001 From: Blake Newman Date: Mon, 11 Jul 2016 20:57:38 +0100 Subject: [PATCH 02/12] support vuex 2.0 migration (#18) --- index.js | 15 ++++++++++++--- package.json | 4 ++-- 2 files changed, 14 insertions(+), 5 deletions(-) diff --git a/index.js b/index.js index 3361310..41ec903 100644 --- a/index.js +++ b/index.js @@ -2,6 +2,7 @@ exports.sync = function (store, router) { patchStore(store) store.router = router + var commit = store.commit || store.dispatch var isTimeTraveling = false var currentPath @@ -29,20 +30,28 @@ exports.sync = function (store, router) { } var to = transition.to currentPath = to.path - store.dispatch('router/ROUTE_CHANGED', to) + commit('router/ROUTE_CHANGED', to) }) } +function applyMutationState(store, state) { + // support above 2.0 + if (store.hasOwnProperty('_committing')) { + return store._committing = state + } + return store._dispatching = state +} + function patchStore (store) { // add state var set = store._vm.constructor.set - store._dispatching = true + applyMutationState(store, true); set(store.state, 'route', { path: '', query: null, params: null }) - store._dispatching = false + applyMutationState(store, false); // add mutations store.hotUpdate({ modules: { diff --git a/package.json b/package.json index 4f9ebed..ba1395e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vuex-router-sync", - "version": "2.0.0", + "version": "2.0.1", "description": "Effortlessly keep vue-router and vuex store in sync.", "main": "index.js", "repository": { @@ -19,7 +19,7 @@ }, "homepage": "https://github.com/vuejs/vuex-router-sync#readme", "peerDependencies": { - "vuex": ">=0.6.2", + "vuex": ">= 0.6.2 < 3", "vue-router": ">=0.7.11" } } From 600cae2de8efc5ec494fb6b6a7e381afeaaa7fd3 Mon Sep 17 00:00:00 2001 From: Evan You Date: Mon, 11 Jul 2016 16:01:48 -0400 Subject: [PATCH 03/12] use 2.0 module API --- index.js | 27 +++++++++++++++++---------- 1 file changed, 17 insertions(+), 10 deletions(-) diff --git a/index.js b/index.js index 41ec903..8e55c0f 100644 --- a/index.js +++ b/index.js @@ -52,16 +52,23 @@ function patchStore (store) { params: null }) applyMutationState(store, false); - // add mutations - store.hotUpdate({ - modules: { - route: { - mutations: { - 'router/ROUTE_CHANGED': function (state, to) { - store.state.route = to - } - } + + var routeModule = { + mutations: { + 'router/ROUTE_CHANGED': function (state, to) { + store.state.route = to } } - }) + } + + // add module + if (store.module) { + store.module('route', routeModule) + } else { + store.hotUpdate({ + modules: { + route: routeModule + } + }) + } } From e119a0024eb13562f425fdc0e35a286effc26222 Mon Sep 17 00:00:00 2001 From: Evan You Date: Mon, 11 Jul 2016 16:01:52 -0400 Subject: [PATCH 04/12] 2.0.2 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index ba1395e..550669a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vuex-router-sync", - "version": "2.0.1", + "version": "2.0.2", "description": "Effortlessly keep vue-router and vuex store in sync.", "main": "index.js", "repository": { From 21a6838e39b005aa15e98dc264110a973d602b9a Mon Sep 17 00:00:00 2001 From: Evan You Date: Fri, 5 Aug 2016 15:45:33 -0400 Subject: [PATCH 05/12] compat with latest rc of vuex/vue-router --- index.js | 76 ++++++++++++++++------------------------------------ package.json | 4 +-- 2 files changed, 25 insertions(+), 55 deletions(-) diff --git a/index.js b/index.js index 8e55c0f..8680fb4 100644 --- a/index.js +++ b/index.js @@ -1,74 +1,44 @@ exports.sync = function (store, router) { - patchStore(store) - store.router = router + store.registerModule('route', { + state: {}, + mutations: { + 'router/ROUTE_CHANGED': function (state, to) { + store.state.route = Object.freeze({ + name: to.name, + path: to.path, + hash: to.hash, + query: to.query, + params: to.params, + fullPath: to.fullPath + }) + } + } + }) - var commit = store.commit || store.dispatch var isTimeTraveling = false var currentPath // sync router on store change store.watch( - function (state) { - return state.route - }, + function (state) { return state.route }, function (route) { - if (route.path === currentPath) { + if (route.fullPath === currentPath) { return } isTimeTraveling = true - currentPath = route.path - router.go(route.path) + currentPath = route.fullPath + router.push(route) }, - { deep: true, sync: true } + { sync: true } ) // sync store on router navigation - router.afterEach(function (transition) { + router.afterEach(function (to) { if (isTimeTraveling) { isTimeTraveling = false return } - var to = transition.to - currentPath = to.path - commit('router/ROUTE_CHANGED', to) - }) -} - -function applyMutationState(store, state) { - // support above 2.0 - if (store.hasOwnProperty('_committing')) { - return store._committing = state - } - return store._dispatching = state -} - -function patchStore (store) { - // add state - var set = store._vm.constructor.set - applyMutationState(store, true); - set(store.state, 'route', { - path: '', - query: null, - params: null + currentPath = to.fullPath + store.commit('router/ROUTE_CHANGED', to) }) - applyMutationState(store, false); - - var routeModule = { - mutations: { - 'router/ROUTE_CHANGED': function (state, to) { - store.state.route = to - } - } - } - - // add module - if (store.module) { - store.module('route', routeModule) - } else { - store.hotUpdate({ - modules: { - route: routeModule - } - }) - } } diff --git a/package.json b/package.json index 550669a..078e63c 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,7 @@ }, "homepage": "https://github.com/vuejs/vuex-router-sync#readme", "peerDependencies": { - "vuex": ">= 0.6.2 < 3", - "vue-router": ">=0.7.11" + "vuex": "^2.0.0-rc.3", + "vue-router": "^2.0.0-rc.1" } } From ebc9578e9a3b8647208bc8b761edc9e96d280b03 Mon Sep 17 00:00:00 2001 From: Evan You Date: Fri, 5 Aug 2016 15:45:42 -0400 Subject: [PATCH 06/12] 3.0.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 078e63c..646ba1a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vuex-router-sync", - "version": "2.0.2", + "version": "3.0.0", "description": "Effortlessly keep vue-router and vuex store in sync.", "main": "index.js", "repository": { From 7a269fed8d87c31c67047e53ed9de7e9cf5a1d13 Mon Sep 17 00:00:00 2001 From: Scott Bedard Date: Wed, 14 Dec 2016 11:02:26 -0700 Subject: [PATCH 07/12] Store route meta data (#32) --- index.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/index.js b/index.js index 8680fb4..5d164aa 100644 --- a/index.js +++ b/index.js @@ -9,7 +9,8 @@ exports.sync = function (store, router) { hash: to.hash, query: to.query, params: to.params, - fullPath: to.fullPath + fullPath: to.fullPath, + meta: to.meta }) } } From 3232eacad4c48f28ead4a93c911cb39361f57fe8 Mon Sep 17 00:00:00 2001 From: Ken Date: Wed, 14 Dec 2016 13:06:49 -0500 Subject: [PATCH 08/12] [29] Store 'from' in state.route (#36) --- index.js | 21 +++++++++++---------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/index.js b/index.js index 5d164aa..559a51f 100644 --- a/index.js +++ b/index.js @@ -2,15 +2,16 @@ exports.sync = function (store, router) { store.registerModule('route', { state: {}, mutations: { - 'router/ROUTE_CHANGED': function (state, to) { + 'router/ROUTE_CHANGED': function (state, transition) { store.state.route = Object.freeze({ - name: to.name, - path: to.path, - hash: to.hash, - query: to.query, - params: to.params, - fullPath: to.fullPath, - meta: to.meta + name: transition.to.name, + path: transition.to.path, + hash: transition.to.hash, + query: transition.to.query, + params: transition.to.params, + fullPath: transition.to.fullPath, + meta: transition.to.meta, + from: transition.from }) } } @@ -34,12 +35,12 @@ exports.sync = function (store, router) { ) // sync store on router navigation - router.afterEach(function (to) { + router.afterEach(function (to, from) { if (isTimeTraveling) { isTimeTraveling = false return } currentPath = to.fullPath - store.commit('router/ROUTE_CHANGED', to) + store.commit('router/ROUTE_CHANGED', { to: to, from: from }) }) } From dd9dad22a126e70fe8db819a2ef13da007a4bb40 Mon Sep 17 00:00:00 2001 From: Vinicius Reis Date: Wed, 14 Dec 2016 16:07:53 -0200 Subject: [PATCH 09/12] Custom module name (#37) * add options. custumize vuex module name * add doc --- README.md | 7 +++++++ index.js | 10 ++++++---- 2 files changed, 13 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index f9a1006..905907e 100644 --- a/README.md +++ b/README.md @@ -19,6 +19,13 @@ sync(store, router) // done. // bootstrap your app... ``` +You can 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: diff --git a/index.js b/index.js index 559a51f..0a7382a 100644 --- a/index.js +++ b/index.js @@ -1,9 +1,11 @@ -exports.sync = function (store, router) { - store.registerModule('route', { +exports.sync = function (store, router, options) { + var moduleName = (options || {}).moduleName || 'route' + + store.registerModule(moduleName, { state: {}, mutations: { 'router/ROUTE_CHANGED': function (state, transition) { - store.state.route = Object.freeze({ + store.state[moduleName] = Object.freeze({ name: transition.to.name, path: transition.to.path, hash: transition.to.hash, @@ -22,7 +24,7 @@ exports.sync = function (store, router) { // sync router on store change store.watch( - function (state) { return state.route }, + function (state) { return state[moduleName] }, function (route) { if (route.fullPath === currentPath) { return From 3a6b4ff56095cc1c49f6b6ee783b47ff07e2e73b Mon Sep 17 00:00:00 2001 From: Evan You Date: Wed, 14 Dec 2016 13:12:58 -0500 Subject: [PATCH 10/12] update usage --- README.md | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 905907e..50db55b 100644 --- a/README.md +++ b/README.md @@ -2,13 +2,16 @@ > Effortlessly keep vue-router and vuex store in sync. -**Note:** requires `vuex>=0.6.2`. - ### 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 From 8f7c970e33f19cada44529f952631019cbc44516 Mon Sep 17 00:00:00 2001 From: Evan You Date: Wed, 14 Dec 2016 13:19:11 -0500 Subject: [PATCH 11/12] tweak route state setting --- index.js | 27 +++++++++++++++++---------- 1 file changed, 17 insertions(+), 10 deletions(-) diff --git a/index.js b/index.js index 0a7382a..0b71f95 100644 --- a/index.js +++ b/index.js @@ -5,16 +5,7 @@ exports.sync = function (store, router, options) { state: {}, mutations: { 'router/ROUTE_CHANGED': function (state, transition) { - store.state[moduleName] = Object.freeze({ - name: transition.to.name, - path: transition.to.path, - hash: transition.to.hash, - query: transition.to.query, - params: transition.to.params, - fullPath: transition.to.fullPath, - meta: transition.to.meta, - from: transition.from - }) + store.state[moduleName] = cloneRoute(transition.to, transition.from) } } }) @@ -46,3 +37,19 @@ exports.sync = function (store, router, options) { store.commit('router/ROUTE_CHANGED', { to: to, from: from }) }) } + +function cloneRoute (to, from) { + const clone = { + name: to.name, + path: to.path, + hash: to.hash, + query: to.query, + params: to.params, + fullPath: to.fullPath, + meta: to.meta + } + if (from) { + clone.from = cloneRoute(from) + } + return Object.freeze(clone) +} From 3908c26120373565f592bf0bbc4c83a093a395ae Mon Sep 17 00:00:00 2001 From: Evan You Date: Wed, 14 Dec 2016 13:19:14 -0500 Subject: [PATCH 12/12] 4.0.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 646ba1a..2f988c4 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vuex-router-sync", - "version": "3.0.0", + "version": "4.0.0", "description": "Effortlessly keep vue-router and vuex store in sync.", "main": "index.js", "repository": {