如何在Vue 2的Vuex store（含Nuxt动态store）中使用$route？

为什么$route无法通过this在Vuex内直接调用 #

Nuxt 中只有通过官方 inject 方法注册的属性，才会被自动注入到 Vuex store 的 this 上下文中。你项目里的$api就是通过该方式注册的，所以可以直接在store内访问。
而$route/$router是 Vue Router 挂载到 Vue 实例上的属性，默认没有注入到 Vuex 上下文，因此直接调用this.$route会报未定义错误。

Vuex 动态store内获取router实例的方案 #

方案1：调用action时传入路由参数（最推荐，耦合度最低） #

在组件内触发action的时候，直接把需要的路由参数作为入参传入：

// 组件内调用
this.$store.dispatch('loadCampaign', {
  share_token: this.$route.query.share_token
})

修改store内的action逻辑，直接读取入参：

async loadCampaign({ commit, dispatch, state }, { share_token }) {
  try {
    let campaign = null;
    share_token
      ? campaign = await this.$api.campaigns.getSharedCampaign(share_token)
      : campaign = await this.$api.campaigns.getCampaign(state.id);
  // 剩余逻辑
}

方案2：编写插件把router注入到Vuex上下文 #

如果需要在多个store方法内频繁使用路由能力，可以写一个Nuxt插件统一注入：

1. 新建plugins/inject-router.js文件：

export default ({ app, store }) => {
  // 注入router实例
  store.$router = app.router
  // 注入响应式的$route属性，实时返回当前路由信息
  Object.defineProperty(store, '$route', {
    get: () => app.router.currentRoute
  })
}

2. 在nuxt.config.js中注册插件：

export default {
  plugins: [
    '~/plugins/inject-router.js'
  ]
}

配置完成后，你就可以在store内像调用this.$api一样直接用this.$route、this.$router了。

内容的提问来源于stack exchange，提问作者Čamo