如何从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.但是,如果它失败并且重定向需要的任何条件都会击中rejectPromise.

通过这种方式,您可以将路由器重定向到一个组件,该组件只是捕获被拒绝的Promise并触发vue-router push,即

# 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 }})
      })