nuxt.js 中如何在外部js中获得app对象？

Question

目前我只知道可以用export default function这种方法获得：

export default function ({ app }) {
    console.log(app.router);
}

但目前的需求是在外部js要返回几个方法，每个方法里面都需要使用到app.router，但不知道应该如何获得app对象，以下是需要修改的代码plugins/token.js：

function request_mp_token(){
    context.app.router.replace('/get_mp_token?url='+encodeURIComponent(location.href));return false;
}

function get_mp_token(){
    return context.app.router.push('/test');
}

export default {
    request_mp_token:request_mp_token,
    get_mp_token:get_mp_token,
}

请问我应该如何在每个方法里面获得app对象，并把这几个方法都export出去给其他模块使用呢？

Answer 1

我觉得可以在你需要app的外部js里写一个接收vue实例的方法，在layout布局配置vue文件的created事件里，把当前页面的this（vue实例）传入到外部js

外部js：

let Vue, Store

const accept_vue = (_vue) => {
  Vue = _vue
  Store = Vue.$store
}

export { accept_vue }

layout文件夹中的vue文件：

import { accept_vue } from '~/assets/api/http'
export default {
  name: 'default',
  created() {
    accept_vue(this)
  },
....
}

我也是苦于这个问题很久，才弄出这么一个笨的办法，如有其他更好地解决方案，麻烦各位大佬不吝赐教。

Answer 2

可以直接用$nuxt,访问vue实例

function request_mp_token(){
    return $nuxt.$router.replace('/get_mp_token?url='+encodeURIComponent(location.href));return false;
}

function get_mp_token(){
    return $nuxt.$router.push('/test');
}

export default {
    request_mp_token:request_mp_token,
    get_mp_token:get_mp_token,
}