Блог

У меня есть файл сервиса под названием 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 равно null
Мой вопрос:

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

Чтобы повторить пункт @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");
  

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

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

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

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

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

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

импортируйте VueAlertify из ‘vue-alertify’;

Vue.use(VueAlertify);

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

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

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