如何在拆分的（vuex）getters.js 文件中访问 $route？答案

【问题标题】：How to access $route within a splitted (vuex) getters.js file?如何在拆分的（vuex）getters.js 文件中访问 $route？
【发布时间】：2020-06-30 08:39:25
【问题描述】：

我将 vuex 用作拆分（getters.js、mutations.js、actions.js、state.js）文件，我想在拆分后的 getters.js 文件中使用 $route 插件变量。实际上，我之前将它们全合一使用，但我切换到 quasar 并且 quasar 建议以某种方式在拆分文件中使用 vuex 模块。好吧，这不是建议，但那里有一个例子。我知道我可以以旧方式使用它，但我想尝试一下，由于我缺乏知识，我不确定。所以它是这样的：

└── store
      └─ routes
          ├── state.js
          ├── actions.js
          ├── mutations.js
          ├── getters.js
          └── index.js

在 index.js 中，它们都被绑定为：

import state from './state'
import * as getters from './getters'
import * as mutations from './mutations'
import * as actions from './actions'

export default {
  namespaced: true,
  getters,
  mutations,
  actions,
  state
}

在 getters.js 文件中，我导出 const 我以前使用的函数。但我需要访问其中一个中的 $route 插件。

export const current_route = state => {
    return this.$route;
}

顺便说一句，我也知道我可以在任何需要的地方直接使用 this.$route（不使用 vuex getter），但我只想知道如何访问这些变量（或者即使有可能) 在这些拆分的文件中。

【问题讨论】：

标签： javascript vue.js vuex quasar-framework

【解决方案1】：

下面是vue-router的源码：

  Vue.mixin({
    beforeCreate () {
      if (isDef(this.$options.router)) {
        /* something else */
        Vue.util.defineReactive(this, '_route', this._router.history.current)
      } else {
        this._routerRoot = (this.$parent && this.$parent._routerRoot) || this
      }
      /* something else */
    }
  })

  Object.defineProperty(Vue.prototype, '$route', {
    get () { return this._routerRoot._route }
  })

如您所见，$route 是$router.history.current 的别名。所以可以直接导入router：

import router from 'path/to/your/router'
export const current_route = state => {
  return router.history.current
}

【讨论】：