从 Vuex Store 中的 action 中推送路由

Question

正在尝试从商店内推动路线变更。我尝试将 router 导入商店本身，然后按照以下方式做一些事情：

LOG_OUT({commit}){
  commit('LOG_OUT__MUTATION');

  router.push({
   name: 'Login' 
  })
}

...但这没有用。

我也不想直接从组件推送路由更改，因为这意味着我需要检查身份验证并在每个组件中推送路由更改，这对我来说似乎很麻烦。

已编辑：

LOG_OUT__MUTATION清除状态下存储的token。

Answer 1

好的，我有一个解决方案给你哥们：

所以首先你写一个这样的商店提交函数：

export const commitLogout = ({commit}) => {
  return new Promise((resolve, reject) => {
    commit('LOG_OUT__MUTATION');
    // once you're done with your clearing, resolve or reject the promise
    resolve();
  });
}

此函数将 return 一个承诺，您可以在注销函数中使用它，最后允许您先提交并清除，然后再注销。

然后你使用这个函数作为你的注销函数：

...

  logout() {
    commitLogout().then(() => {
      this.$router.push({
       name: 'Login' 
      })
    })
  }

...

Answer 2

我终于明白了。

最终实施

在您的 store 中，只需导入 router:

import router from '@/router/index'

actions: {

  LOG_OUT({commit}){
    commit('LOG_OUT__MUTATION');

    router.push({
      name:'Login'
    })
  }

}

然后从我的应用程序的另一部分，我简单地导入了 store 并发送了一个动作：

import Store from '@/store/store'

myFunction () {
  Store.dispatch('LOG_OUT');
}

初步实施

这是我对 Daksh Miglani 解决方案的实施（有效）。在我的 store.js 中，我有：

export const forceLogout = (commit) => {

  return new Promise((resolve, reject) => {
    commit('LOG_OUT__MUTATION');
    resolve();
  })

}

export default new Vuex.Store({
  actions,
  mutation
})

然后在应用程序的另一部分 (helpers.js)，我有：

import Store from '@/store/store'
import { forceLogout } from '@/store/store'
import router from '@/router/index'

forceLogout(Store.commit)
  .then(() => {
    debugger;
    router.push({
      name:'Login'
    })

  }).catch((error) => {
     console.log(error)
  })

从 Vuex Store 中的 action 中推送路由

Push route from within action in Vuex Store

javascript

vue.js

vue-router

vuex