来自 .js 文件的 VueJs 调用插件

Question

我需要你更深入地了解我如何使用 vueJS。

我的应用

我有一个Login.vue，它正在调用一个函数logUser() from UserActions.js，它正在调用我的AxiosFacade.js' function postRequest()

我使用插件以createApp(App).use(Toaster).mount('#app') 显示烤面包机信息并使用this.$toast.show(`Default Toast Message`); 调用我的烤面包机

我想做的事

我想从 AxiosFacade.js 中我的 axios 调用的 catch 部分调用我的函数 this.$toast.show

类似：

return axios.post(`${serv}/${ressource}`,
    {
        data: params,
    },
    {headers: {'Authorization': 'Bearer ' + token}})
    .then((response) => response = response.data)
    .catch((err) => {
        this.$toast.error(err.response.data.message);
        throw err.response.data.message
    })

但我不太明白如何从 .js 和 .vue 文件中创建链接

PS：下一步将是拥有我自己的 Toaster.vue 组件，并在我的 AxiosFacade.js 中显示/隐藏它，如果你也有这方面的提示：)

谢谢！

Answer 1

如果删除 axios 函数的 catch 部分会怎样

return axios.post(`${serv}/${ressource}`,
{
    data: params,
},
{headers: {'Authorization': 'Bearer ' + token}})
.then((response) => response = response.data)

在你想展示吐司的地方抓住它。登录.vue：

function logUser () {
  return postRequest()
    .then(responseData => {
      //do your stuff
    })
    .catch((err) => {
      this.$toast.error(err.response.data.message)
      throw err.response.data.message
    })
}

更新：

解决方案实际上非常简单。您只需要将 this 需要作为 vue 实例的方法添加到您的组件。

参见以下示例：

访问VueInstance.js：

export function compare(vueInstance) {
  return this === vueInstance
}

MyComponent.vue：

导入函数

import { compare } from "./accessVueInstance"

将函数添加到您的组件中：

如果你使用类组件：

export default class MyComponent extends Vue {
  compare = compare

  created() {
    console.log(this.compare(this)) //will log true
  }
  //your stuff
}

其他：

methods: {
  compare
},
created() {
  console.log(this.compare(this)) //will log true
}

vue docs

Vue 自动为方法绑定 this 值，以便它始终 引用组件实例。

看到它在行动codesandbox.io