如何从 Vuex 状态使用 Vue Router？

在我的组件中我一直在使用：

this.$router.push({ name: 'home', params: { id: this.searchText }});

要改变路线。我现在已经将一个方法移入我的 Vuex 操作中，当然this.$router不再有效。也没有Vue.router。那么，如何从 Vuex 状态调用路由器方法呢？

我假设vuex 路由器同步 https://github.com/vuejs/vuex-router-sync在这里没有帮助，因为您需要路由器实例。

因此，虽然这感觉不太理想，但您可以将实例设置为 webpack 中的全局实例，即

global.router = new VueRouter({
  routes
})

const app = new Vue({
  router
  ...

现在您应该能够：router.push({ name: 'home', params: { id: 1234 }})从应用程序中的任何位置

作为替代方案，如果您不喜欢上述想法，您可以从您的操作中返回一个 Promise。然后，如果操作成功完成，我假设它调用了突变或其他东西，你可以resolve承诺。然而，如果它失败了，无论重定向需要什么条件，你都会遇到reject承诺。

通过这种方式，您可以将路由器重定向移动到一个组件中，该组件只需捕获被拒绝的 Promise 并触发 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 }})
      })