Return an ‘unsync’ Fn from the sync method to provie a way to un-sync (vuejs#64)

Currently, vuex-router-sync only publicly exposes a single method: ‘sync’.  This method creates a store.watch as well as a router.beforeHook.  No publicly available method existed to effectively ‘unsync’ vuex-router-sync and remove the watch and hook, which created ‘dangling’ refrences and a potential memory leak.  Users of this library may need an ‘unsync’ function if they, for example, only use Vue.js in specific portions of their webapp (e.g. with React, Angular, etc.) and when users navigate away from that portion they want to remove/clean-up all Vue.js resources and components.  Includes a unit test.  Had to bump vue-router to version 2.5.0 which was the first version to allow de-registering hook functions.

Author: Nathan Koterba

README.md

@@ -17,9 +17,13 @@ import { sync } from 'vuex-router-sync'
 import store from './vuex/store' // vuex store instance
 import router from './router' // vue-router instance
 
-sync(store, router) // done.
+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:
@@ -28,7 +32,6 @@ You can optionally set a custom vuex module name:
 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:

index.js

@@ -15,7 +15,7 @@ exports.sync = function (store, router, options) {
   var currentPath
 
   // sync router on store change
-  store.watch(
+  const storeUnwatch = store.watch(
     function (state) { return state[moduleName] },
     function (route) {
       if (route.fullPath === currentPath) {
@@ -32,14 +32,29 @@ exports.sync = function (store, router, options) {
   )
 
   // sync store on router navigation
-  router.afterEach(function (to, from) {
+  const afterEachUnHook = router.afterEach(function (to, from) {
     if (isTimeTraveling) {
       isTimeTraveling = false
       return
     }
     currentPath = to.fullPath
     store.commit(moduleName + '/ROUTE_CHANGED', { to: to, from: from })
   })
+
+  return function unsync() {
+    // On unsync, remove router hook
+    if (afterEachUnHook != null) {
+      afterEachUnHook()
+    }
+    
+    // On unsync, remove store watch
+    if (storeUnwatch != null) {
+      storeUnwatch();
+    }
+
+    // On unsync, unregister Module with store
+    store.unregisterModule(moduleName)
+  }
 }
 
 function cloneRoute (to, from) {

package.json

@@ -32,7 +32,7 @@
     "vuex": "^2.1.0"
   },
   "peerDependencies": {
-    "vue-router": "^2.0.0",
+    "vue-router": "^2.5.0",
     "vuex": "^2.1.0"
   }
 }

test/test.js

@@ -32,7 +32,7 @@ const run = (originalModuleName, done) => {
     ]
   })
 
-  sync(store, router, {
+  const unsync = sync(store, router, {
     moduleName: originalModuleName
   })
 
@@ -56,7 +56,7 @@ const run = (originalModuleName, done) => {
 
   Vue.nextTick(() => {
     expect(app.$el.textContent).toBe('/c/d?n=1#hello c d')
-    done()
+    done(unsync)
   })
 }
 
@@ -67,3 +67,36 @@ test('default usage', done => {
 test('with custom moduleName', done => {
   run('moduleName', done)
 })
+
+test('desync', done => {
+  const store = new Vuex.Store()
+  spyOn(store, "watch").and.callThrough()
+  
+  const router = new VueRouter()
+
+  const moduleName = 'testDesync'  
+  const unsync = sync(store, router, {
+    moduleName: moduleName
+  })
+
+  expect(unsync).toBeInstanceOf(Function)
+
+  // Test module registered, store watched, router hooked
+  expect(store.state[moduleName]).toBeDefined()
+  expect(store.watch).toHaveBeenCalled()
+  expect(store._watcherVM).toBeDefined()
+  expect(store._watcherVM._watchers).toBeDefined()
+  expect(store._watcherVM._watchers.length).toBe(1)
+  expect(router.afterHooks).toBeDefined()
+  expect(router.afterHooks.length).toBe(1)
+
+  // Now unsync vuex-router-sync
+  unsync()
+
+  // Ensure router unhooked, store-unwatched, module unregistered
+  expect(router.afterHooks.length).toBe(0)
+  expect(store._watcherVm).toBeUndefined()
+  expect(store.state[moduleName]).toBeUndefined()
+  
+  done()
+})