Vue.js/Mixins - vue 구성 요소 외부에서 전역 mixin-object를 가져 오는 방법이 있습니까?

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 
}); 

이 믹스 인 수입 모든 구성 요소에있을 필요가 검증 방법의 e.t.c 일부 인증 개체를. 내 모든 구성 요소가이 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 대신 플러그인을 사용해야합니까?

Answer 1

필자는 auth 용으로 별도의 파일을 만들고 혼합 파일로 만들지 않습니다. 그런 다음 vue.use()를 사용하여 vue 객체에 대한 인증을 설정합니다. 파일이 어떻게 보이는지의 샘플 :

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

그런 다음 주 JS에서 main.js

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

그런 다음 뷰를 사용할 수 있어야 파일

auth.js .auth 또 다른 옵션은 mixin을 계속 사용하고 저장소 (vuex와 같은)에 값을 전달하거나 프로젝트가 작 으면 프로젝트를 직접 만들 수 있습니다.