vuex-enhanced-router-sync v1.0.0

vuex-enhanced-router-sync

This package replaces vuex-router-sync and adds some useful features.

Why this exists

I dislike the fact that vuex-router-sync replaces the store state instead of updating it. This leads to the recomputation of all computed properties and getters related to the router state, even though it isn't really necessary.

Let's say you have a very expensive getter that depends on on the ?search=foo query parameter and takes 1 second to complete. The user then clicks on a search result and &open=1 is added to the query. vuex-enhanced-router-sync leaves search alone and updates open while vuex-router-sync would update both search and open, which leads to longer blocking of the UI.

Installation

npm install vuex-enhanced-router-sync
# or
yarn add vuex-enhanced-router-sync

Usage

See vue-router-sync

import { sync } from "vuex-enhanced-router-sync";

sync(store, router, { immutable: false, moduleName: "route" });
// or
sync(store, router, "route"); // only supply moduleName
// or
sync(store, router); // default options

Parameters

• store: Store<any>
• router: VueRouter

• options: string | options (optional)

  • immutable: boolean (default false)

    Set this to true if you want vuex-enhanced-router-sync to treat the state like an immutable object.

  • moduleName: string (default "route")

    The state can be accessed via vm.$store.state.<module name>.path. See below for all available properties. This can also be set by supplying a string to options.

Available properties

From vue-router:

• store.state.<module name>
  • name: string: The name of the current route, if it has one.
  • path: string: A string that equals the path of the current route.
  • hash: string: The hash of the current route.
  • fullPath: string: The full resolved URL including query and hash.
  • query: object: An object that contains key/value pairs of the query string.
  • params: object: An object that contains key/value pairs of dynamic segments and star segments.
  • meta: object: The meta of the current route.
  • from: object: The previous route.