Vuex Router Sync

Синхронизирует текущий маршрут $route Vue Router с хранилищем Vuex.

Использование

# последняя версия работает только с vue-router >= 2.0
npm install vuex-router-sync

# для использования с vue-router < 2.0:
npm install vuex-router-sync@2

import { sync } from 'vuex-router-sync'
import store from './store' // экземпляр хранилища Vuex
import router from './router' // экземпляр Vue Router

const unsync = sync(store, router) // готово. Возвращает функцию отмены синхронизации

// инициализация приложения...

// Во время деинициализации приложения (например, вы используете Vue.js только в части вашего приложения и уходите из этой части, чтобы освободить/уничтожить компоненты/ресурсы Vue)
unsync() // Отменяет синхронизацию хранилища с маршрутизатором

Можно дополнительно задать пользовательское имя модуля Vuex:

sync(store, router, { moduleName: 'RouteModule' } )

Как это работает?

• Добавляет модуль route в хранилище, который содержит состояние, представляющее текущий маршрут:

  store.state.route.path   // текущий путь (строка)
  store.state.route.params // текущие параметры (объект)
  store.state.route.query  // текущая строка запроса (объект)

• Когда маршрутизатор переходит на новый маршрут, состояние хранилища обновляется.

• store.state.route является неизменным, потому что это производное состояние от URL, которое является источником истины. Вы не должны пытаться инициировать навигацию путём изменения объекта маршрута. Вместо этого просто вызовите $router.push() или $router.go(). Обратите внимание, что вы можете сделать $router.push({ query: {...}}) для обновления строки запроса текущего пути.

Лицензия

MIT