问题描述
限时送ChatGPT账号..在我一直使用的组件中:
In my components I've been using:
this.$router.push({ name: 'home', params: { id: this.searchText }});
改变路线.我现在已经将一个方法移动到我的 Vuex 动作中,当然 this.$router
不再起作用.Vue.router
也没有.那么,请问如何从 Vuex 状态调用路由器方法?
To change route. I've now moved a method into my Vuex actions, and of course this.$router
no longer works. Nor does Vue.router
. So, how do I call router methods from the Vuex state, please?
推荐答案
我假设 vuex-路由器同步在这里没有帮助,因为您需要路由器实例.
I'm assuming vuex-router-sync won't help here as you need the router instance.
因此,虽然这感觉并不理想,但您可以将实例设置为 webpack 中的全局实例,即
Therefore although this doesn't feel ideal you could set the instance as a global within webpack, i.e.
global.router = new VueRouter({
routes
})
const app = new Vue({
router
...
现在您应该能够:router.push({ name: 'home', params: { id: 1234 }})
从您应用内的任何位置
now you should be able to: router.push({ name: 'home', params: { id: 1234 }})
from anywhere within your app
作为替代,如果您不喜欢上述想法,您可以从您的操作中返回一个 Promise.然后,如果操作成功完成,我假设它调用了突变或其他东西,您可以resolve
Promise.但是,如果它失败并且重定向所需的任何条件都会命中您reject
Promise.
As an alternative if you don't like the idea of the above you could return a Promise from your action. Then if the action completes successfully I assume it calls a mutation or something and you can resolve
the Promise. However if it fails and whatever condition the redirect needs is hit you reject
the Promise.
通过这种方式,您可以将路由器重定向移动到一个组件中,该组件简单地捕获被拒绝的 Promise 并触发 vue-router 推送,即
This way you can move the routers redirect into a component that simply catches the rejected Promise and fires the vue-router push, i.e.
# 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 }})
})
这篇关于如何从 Vuex 状态使用 Vue Router?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
更多推荐
[db:关键词]
发布评论