IT이야기

vue 플러그인의 유형을 추가하는 방법?

cyworld 2022. 5. 22. 11:27
반응형

vue 플러그인의 유형을 추가하는 방법?

유형 스크립트가 포함된 vue에 대한 자체 플러그인을 추가해 보십시오.

그러나 내가 vue 프로토타입으로부터 나의 방법을 사용하는 순간, 나의 방법은$authmyComponent 유형에 없음.또한 플러그인에 .d.ts를 추가하지만, 나는 그가 정확하지 않다고 생각한다. 그리고 플러그 인에서 사용 설치나 필요를 필요로 하지 않는다고 생각한다.일부 예에서는 설치를 보지 않지만 문서에서는 설치를 사용해야 한다고 본다.

내 플러그인

import _Vue from 'vue';
import store from '@/store'
import * as firebase from 'firebase';

export default {
    install: (Vue: typeof _Vue, options?: any) => {
        const base = firebase.initializeApp(config);
        const auth = firebase.auth();
        Vue.prototype.$auth = {
            login: async (username: string, pass: string) => {
                return await auth.signInWithEmailAndPassword(username, pass)
            },
            logout: async () => {
                await auth.signOut()
            }
        };
        auth.onAuthStateChanged((user: any) => {
            store.commit('updateUser',{ user })
        })
    }
}

myPlugin.d.ts

declare module 'vue/types/vue' {
    interface Vue {
        $auth: {
            login: (username: string, pass: string) => Promise<any>
        };
    }
}

구성 요소

export default class SignUp extends Vue {
    email: string = '';
    password: string = '';

    async onSubmit(){
        if ((this.$refs.form as any).validate()) {
            const auth = await this.$auth.login(this.email, this.password)
        }
    }


}
  1. install함수는 엄격한 요구 사항이며, 이 함수는 Vue에 의해 내부적으로 사용된다.Vue.use(YourAwesomePlugin)플러그 인을 로드하십시오.

  2. 나는 네가 말한 것처럼 선언 파일이 잘 작동하도록 할 수는 없었지만, 문서 예에서는 한 작가가 선언문을 논리(별도가 아닌)가 있는 파일로 합치시켰다.d.ts). 그래서 만약 당신이 당신의 내용을 담는다면.myPlugin.d.ts기본 플러그인 파일로 - 인터페이스가 로드되고$auth에 존재할 것이다this.

TS 문서(모듈 확대 섹션 참조): 선언 병합


갱신하다

만들기 위해서.d.ts파일 작업 해당 파일에서 vue만 가져오면 된다.

Vue 문서: 플러그인과 함께 사용하기 위한 유형 증가

참조URL: https://stackoverflow.com/questions/55311595/how-to-add-types-for-vue-plugin

반응형