generator-foo/templates/foo/core/vue/router-sync.js

Foo project scaffold generator based on generator-jam3

/**
 * Created by mendieta on 7/8/16.
 */
exports.sync = function ( store, router ) {
  patchStore( store )
  store.router = router

  var isTimeTraveling = false
  var currentPath

  // sync router on store change
  store.watch(
    function ( state ) {
      return state.route
    },
    function ( route ) {
      if ( route.path === currentPath ) {
        return
      }
      isTimeTraveling = true
      currentPath     = route.path
      router.go( route.path )
    },
    { deep: true, sync: true }
  )

  // sync store on router navigation
  router.afterEach( function ( transition ) {
    if ( isTimeTraveling ) {
      isTimeTraveling = false
      return
    }
    var to      = transition.to
    currentPath = to.path
    store.dispatch( 'router/route_changed', to )
  } )
}

function patchStore ( store ) {
  // add state
  var set            = store._vm.constructor.set
  store._dispatching = true
  set( store.state, 'route', {
    path  : '',
    query : null,
    params: null
  } )
  store._dispatching = false
  // add mutations
  store.hotUpdate( {
    modules: {
      route: {
        mutations: {
          'router/route_changed': function ( state, to ) {
            store.state.route = to
          }
        }
      }
    }
  } )
}