从 Vuex Store 的操作中推送路由答案

【问题标题】：Push route from within action in Vuex Store从 Vuex Store 的操作中推送路由
【发布时间】：2018-08-10 09:34:39
【问题描述】：

尝试从商店内推送路线更改。我尝试将router 导入商店本身，然后按照以下方式进行操作：

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

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

...但这没有用。

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

已编辑：

LOG_OUT__MUTATION 清除存储在状态中的令牌。

【问题讨论】：

请解释并包含LOG_OUT__MUTATION代码
刚刚编辑了我的问题 :) 它基本上只是从商店中清除了 Auth 令牌。
如果我错了，请纠正我，它会在提交到商店之前进入登录视图页面，对吗？这意味着路由器在提交之前推送，因此这是一个异步问题。
不，它会从商店中清除令牌，然后重定向到登录。

标签： javascript vue.js vue-router vuex

【解决方案1】：

我终于明白了。

最终实现

在您的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)
  })

【讨论】：

当我们在 Vue 实例中包含路由器时，它不是在应用程序中的任何地方都可用，甚至是 Vuex 吗？

【解决方案2】：

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

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

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();
  });
}

这个函数将返回一个promise，你可以在你的注销函数中使用它，最后允许你先提交和清除然后注销。

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

...

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

...

【讨论】：

好的，我明白了。说得通。我如何从组件外部访问 router 函数？我想积极避免这样做，因为这意味着我需要在每个组件中存储注销验证。
@Modermo 编辑了我的代码，this.$router 是到路由器的映射。
或Vue.prototype.$router，技术上就是this.$router
在LOG_OUT 操作中调用Vue.prototype.$router 只会返回undefined。 Vue 正在被导入，所以我不确定这里给出了什么。
尝试 vue-router-sync，在 npm 上可用