如何在 vue 组件之外使用 vuesax $vs.notify答案

【问题标题】：How to use vuesax $vs.notify outside of vue component如何在 vue 组件之外使用 vuesax $vs.notify
【发布时间】：2021-02-22 15:35:11
【问题描述】：

我正在使用$vs.notify 来显示来自数据库的消息。所以想到在actions.js中使用它。但得到错误TypeError: Cannot read property 'notify' of undefined。有什么方法可以在 action.js 文件中使用它。使用的代码在这里：

addTag({
    commit
}, tag) {
    return new Promise((resolve, reject) => {
        Vue.prototype.$http.post('/tags/add/', {
                tag
            })
            .then((response) => {
                commit('ADD_TAG', Object.assign(response.data.data[0]))
                Vue.prototype.$vs.notify({
                    title: 'Success',
                    text: `tag-${response.data.data[0].name} added suceesfully`,
                    iconPack: 'feather',
                    icon: 'icon-alert-circle',
                    color: 'success'
                })
                resolve(response)
            })
            .catch((error) => {
                reject(error)
            })
    })
}

enter image description here

【问题讨论】：

$vs.notify 单独不起作用？

标签： vue.js vuesax

【解决方案1】：

Vuesax 没有在Vue.prototype 上注册任何内容，这就是您收到特定错误消息的原因。似乎该服务被添加到每个组件中。它也不能在模块中导入。因此，作为一种解决方法，您可以自己将其添加到原型中。

将App.vue中的服务添加到Vue.prototype:

App.vue

<script>
import Vue from 'vue';

export default {
  created() {
    Vue.prototype.$vs = this.$vs;
  }
}
</script>

现在您可以按照您在帖子中尝试的方式使用它：

actions.js

import Vue from 'vue';

Vue.prototype.$vs.notify(...)

【讨论】：

【解决方案2】：

在official documentation 中声明

要添加通知，我们有全局函数 $vs.notify

所以，尝试在您的 vuex 操作中使用 this._vm.$vs.notify 或 this._vm.notify。

【讨论】：