vue.js - 如何从 Vuex 状态使用 Vue Router？

Question

在我的组件中，我一直在使用:

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

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

Answer 1

我假设 vuex-router-sync在这里不会有帮助，因为您需要路由器实例。

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

global.router = new VueRouter({
  routes
})

const app = new Vue({
  router
  ...

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

---

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

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