Как использовать Vue Router из состояния Vuex?

Я предполагаю, что vuex-router-sync здесь не поможет, так как вам нужен маршрутизатор пример.

Поэтому, хотя это не кажется идеальным, вы можете установить экземпляр как глобальный в веб-пакете, т.е.

global.router = new VueRouter({
  routes
})

const app = new Vue({
  router
  ...

теперь у вас должна быть возможность: router.push({ name: 'home', params: { id: 1234 }}) из любого места в вашем приложении

В качестве альтернативы, если вам не нравится идея вышеизложенного, вы можете вернуть Promise из своего действия. Затем, если действие завершается успешно, я предполагаю, что оно вызывает мутацию или что-то в этом роде, и вы можете resolve выполнить обещание. Однако, если он не удастся и какое бы условие ни потребовалось для перенаправления, вам reject будет выполнено обещание.

Таким образом, вы можете переместить перенаправление маршрутизаторов в компонент, который просто улавливает отклоненное обещание и запускает push vue-router, т.е.

# vuex
actions: {
  foo: ({ commit }, payload) =>
    new Promise((resolve, reject) => {
      if (payload.title) {
        commit('updateTitle', payload.title)
        resolve()
      } else {
        reject()
      }
    })

# component
methods: {
  updateFoo () {
    this.$store.dispatch('foo', {})
      .then(response => { // success })
      .catch(response => {
        // fail
        this.$router.push({ name: 'home', params: { id: 1234 }})
      })

В такой ситуации я использую .go вместо .push.

Извините, без объяснения причин, но в моем случае это сработало. Я оставляю это будущим гуглерам вроде меня.

Я считаю, что rootState.router будет доступен в ваших действиях, если вы передали router в качестве параметра в основном конструкторе Vue.

Как упоминал GuyC, я также подумал, что вам может быть лучше вернуть обещание из вашего действия и маршрутизации после его разрешения. Проще говоря: dispatch(YOUR_ACTION).then(router.push()).

Обновлять

После того, как я опубликовал этот ответ, я заметил, что определение его так, как я представил Typescript, перестало обнаруживать поля state. Я предполагаю, что это потому, что я использовал any как тип. Возможно, я мог бы определить тип вручную, но для меня это звучит как повторение. Таким образом, на данный момент я получил функцию вместо расширения класса (я был бы рад сообщить мне другое решение, если кто-то его знает).

import { Store } from 'vuex'
import VueRouter from 'vue-router'
// ...

export default (router: VueRouter) => {
  return new Store({
  // router = Vue.observable(router) // You can either do that...
  super({
    state: {
      // router // ... or add `router` to `store` if You need it to be reactive.
      // ...
    },
    // ...
  })
}

import Vue from 'vue'
import App from './App.vue'
import createStore from './store'
// ...

new Vue({
  router,
  store: createStore(router),
  render: createElement => createElement(App)
}).$mount('#app')

Первоначальное содержание ответа

Я лично только что сделал обертку для типичного класса Store.

import { Store } from 'vuex'
import VueRouter from 'vue-router'
// ...

export default class extends Store<any> {
  constructor (router: VueRouter) {
    // router = Vue.observable(router) // You can either do that...
    super({
      state: {
        // router // ... or add `router` to `store` if You need it to be reactive.
        // ...
      },
      // ...
    })
  }
}

Если вам нужно $route, вы можете просто использовать router.currentRoute. Просто помните, что Вам скорее понадобится router реактивный, если Вы хотите, чтобы Ваш getters с router.currentRoute работал должным образом.

А в main.ts (или .js) я просто использую его с new Store(router).

import Vue from 'vue'
import App from './App.vue'
import Store from './store'
// ...

new Vue({
  router,
  store: new Store(router),
  render: createElement => createElement(App)
}).$mount('#app')