Как создать сервис в Vue и использовать все это. $ T, this. $ Alerttify и т. Д.

Question

У меня есть служебный файл с именем message.vue

<script>
export default {
    methods:{
        alert(msg,title){            
            this.$alertify.alert( title,msg);   
        }
    }
}
</script>

И я пользуюсь, как показано ниже.

import messageSvc from '@/shared/services/message'
export default {
  methods:{
     showMessage(){ messageSvc.alert( 'msg', 'title'); }
  }
}

Это не работает, this.$alertify равно нулю Мой вопрос:

1. Это лучший способ создать сервис в Vue?
2. Или как сделать this.$alertify доступным в моем сервисе?

Answer 1

Чтобы ответить на ваши вопросы:

1. Да. Это лучший способ создать модуль службы / NPM.

Вы можете воспользоваться ссылкой Vuex или VueAlertify , чтобы получить больше идей.

2. Чтобы сделать его глобально доступным для всех компонентов Vue, необходимо вызвать глобальный метод Vue.use(plugin_name/service_name). В вашем случае это $ alerttify, тогда оно должно быть как показано ниже

Я полагаю, что вы используете VueAlertify

импорт VueAlertify из 'vue-alertstify';

Vue.use (VueAlertify);

Однако вам необходимо зарегистрировать плагин / сервис до вызова Vue Instance.

Официальные документы для Плагины

Надеюсь, это поможет!

Answer 2

Чтобы повторить точку @ varit05, вам нужно добавить vue-alertify к вашему экземпляру Vue. Я создал этот пример для вас , используя примеры предупреждений, которые можно найти на странице GitHub для VueAlertify.

Вот GitHub ссылка на репозиторий, содержащий исходный код из моего примера.

Это важная часть (должна быть в вашей точке входа, например main.js, которая предоставит всему вашему приложению доступ к этой this.$alertify "услуге"):

import Vue from "vue";
import App from "./App.vue";
import VueAlertify from "vue-alertify";

Vue.use(VueAlertify);

Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

Answer 3

Если вещи, к которым вы хотите получить доступ, правильно определены, вы можете import Vue from 'vue'; и к ним получить доступ Vue.alertify;