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为空我的问题是：

这是在Vue中创建服务的最佳方法吗？
或者如何在我的服务中提供this.$alertify？

Answer 1

如果正确定义了要访问的内容，则可以import Vue from 'vue';并且它们访问Vue.alertify;

Answer 2

要回答您的问题：

是的。这是创建服务/ NPM模块的最佳方法。

您可以参考Vuex或VueAlertify以获得更多的想法。

要使其对所有Vue组件全局可用，您需要调用全局方法Vue.use(plugin_name/service_name)。您的情况是$ alertify，然后应如下所示

我相信您正在使用VueAlertify

从“ vue-alertify”导入VueAlertify；

Vue.use（VueAlertify）;

但是，您需要在调用Vue实例之前注册插件/服务。

Plugins的官方文档

希望这会有所帮助！

Answer 3

要重申@ varit05点，您需要向Vue实例添加vue-alertify。 I have created this example for you使用可以在GitHub page for VueAlertify.

上找到的示例警报

Here is a 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");

如何在Vue中创建服务并使用所有this。$ t，this。$ alertify等

3 个答案: