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承诺。但是，如果它失败并且重定向需要的任何条件都会使你reject承诺。

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

Answer 2

我相信rootState.router将在您的操作中可用，假设您在主Vue构造函数中作为选项传递router。

正如GuyC提到的那样，我也认为你可能会更好地在你的行动和路线结算后返回承诺。简单来说：dispatch(YOUR_ACTION).then(router.push())。

Answer 3

在一种情况下，我发现自己使用.go而不是.push。

对不起，没有原因的解释，但以我为例。我将其留给像我这样的未来Google员工使用。

Answer 4

    state: {
        anyObj: {}, // Just filler
        _router: null // place holder for router ref
    },
    mutations: {
        /***
        * All stores that have this mutation will run it
        *
        *  You can call this in App mount, eg...

        *  mounted () {
        *    let vm = this
        *    vm.$store.commit('setRouter', vm.$router)
        *  }
        *
        setRouter (state, routerRef) {
            state._router = routerRef
        }
    },
    actions: {
        /***
        * You can then use the router like this
        * ---
        someAction ({ state }) {
            if (state._router) {
                state._router.push('/somewhere_else')
            } else {
                console.log('You forgot to set the router silly')
            }
        }
    }
}

Answer 5

更新

发布此答案后，我注意到以我呈现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')

如何从Vuex状态使用Vue Router？

5 个答案:

更新

初始答案内容