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

Posted

技术标签:

【中文标题】Vue.js / Mixins - 有没有办法在 vue 组件之外获取全局 mixin-object?【英文标题】:Vue.js / Mixins - Is there a way to get the global mixin-object outside of the vue component? 【发布时间】:2018-04-28 16:53:22 【问题描述】:

我是 Vue.js 的新手

我正在使用 Vue.js 2.4.4。 我在 app.js 文件中创建了全局 mixin:

...
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 对象并更改它的内部值,或者您能否提供一些小建议或示例什么是此类任务的正确解决方案? 还是应该使用插件而不是 mixins?

【问题讨论】:

Vuex 的完美情况。它是 Vue 的状态机。您将所有身份验证信息保存在状态中,然后使用路由器和 mixin 读取它。 完美! :) 我会尝试你的建议。 【参考方案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),或者如果您的项目很小,则创建您自己的......

【讨论】:

谢谢 :) 是的。这就是我需要的,ps。我还没有与 vuex 合作过,对于可能的愚蠢问题,我深表歉意。现在我明白该怎么做了:) 类似的方法是创建一个 Vue 插件。 vuejs.org/v2/guide/plugins.html

以上是关于Vue.js / Mixins - 有没有办法在 vue 组件之外获取全局 mixin-object?的主要内容,如果未能解决你的问题,请参考以下文章

Vue Js如何在单个文件模板中使用mixins?

vue.js基础__ mixins 选项

vue.js 中的mixins 的用法

vue.js 中的mixins 的用法

在 Vue js 中全局读取配置,如 Mixins

小技巧|使用Vue.js的Mixins复用你的代码