Vue.js / Mixins - 有没有办法在 vue 组件之外获取全局 mixin 对象？

Question

我是 Vue.js

的新手

我正在使用 Vue.js 2.4.4。我在我的 app.js 文件中创建了全局混合：

...
import router from './router'
...(some imports and plugins definitions)

Vue.use(VeeValidate);
Vue.component(VuePassword);
...

Vue.mixin({
    data: function(){
        return {
            get auth(){
                return Auth;
            }
        }
    }
    });

const app = new Vue({
    el: '#root',
    template: `<app></app>`,
    components: { App },
    router
});

此 mixin 导入了一些带有验证方法的 Auth 对象 e.t.c，每个组件都需要这些方法。我所有的组件都可以检查这个 mixin，它工作正常。

但是我需要在每次路由请求后检查身份验证状态，并且我想使用我当前存在的 mixin，所以我试图在我的 router.js 文件中做这样的事情：

import Vue from 'vue'
import VueRouter from 'vue-router'
...

Vue.use(VueRouter);

const router = new VueRouter({
    routes:[
      ...
    ]
});
router.beforeEach((to, from, next) => {
    if(to.meta.requiresAuth) {
        if(...call to mixin method) {
            next();
        } else {
            next('/');
        }
    } else {
        next();
    }
});

export default router

问题： 有没有办法获取全局 mixin 对象并更改其内部值，或者您能否提供一些小建议或示例，这种任务的正确解决方案是什么？或者我应该使用插件而不是混合？

Answer 1

我宁愿为 auth 创建一个单独的文件，而不是将其作为 mixin。然后使用 Vue.use() 将在 vue 对象上设置身份验证。文件的示例：

auth.js

export default function(Vue) {
    Vue.auth = {
        // do your auth logic
    }
}

然后在你的主js文件中 main.js

import Auth from './auth.js'
Vue.use(Auth);

那么你应该可以使用 Vue.auth 另一种选择是继续使用 mixin 并将值传递给商店（如 vuex），或者如果您的项目很小，则创建您自己的...

Vue.js / Mixins - 有没有办法在 vue 组件之外获取全局 mixin 对象？

Vue.js / Mixins - Is there a way to get the global mixin-object outside of the vue component?

vue.js

vue-router

vuejs2

vue-mixin