Using VueJs to invoke a plugin from a .js file

Question

Using VueJs to invoke a plugin from a .js file

I'm seeking a deeper understanding of working with vueJS.

My current setup

In my Login.vue component, there is a function logUser() from UserActions.js which in turn calls the postRequest() function from AxiosFacade.js

Additionally, I use a plugin to display Toast information using

createApp(App).use(Toaster).mount('#app')

and trigger the toaster with

this.$toast.show(`Default Toast Message`)

What I aim to achieve

I want to be able to call this.$toast.show from the catch blocks of Axios calls in AxiosFacade.js

For example:

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
    })

However, I am unsure about how to establish connections between .js and .vue files

PS: My next objective is to create my own Toaster.vue component and control it (showing/hiding) from AxiosFacade.js. Any advice on this would be appreciated :)

Thank you!

javascript vue.js plugins toast

Answer 1

Answer №1

Imagine if you were to eliminate the catch part from your axios function

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

and handle it where you want to display the toast. Login.vue:

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

Update:

The solution is actually pretty straightforward. Simply add your method where this needs to refer to the vue instance in your component.

Check out the following example:

accessVueInstance.js:

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

MyComponent.vue:

import the function

import { compare } from "./accessVueInstance"

add the function to your component:

If you use class components:

export default class MyComponent extends Vue {
compare = compare

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

Else:

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

vue docs

Vue automatically binds the this value for methods so that it always refers to the component instance.

See it in action codesandbox.io

Answer 2

Imagine if you were to eliminate the catch part from your axios function

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

and handle it where you want to display the toast. Login.vue:

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

Update:

The solution is actually pretty straightforward. Simply add your method where this needs to refer to the vue instance in your component.

Check out the following example:

accessVueInstance.js:

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

MyComponent.vue:

import the function

import { compare } from "./accessVueInstance"

add the function to your component:

If you use class components:

export default class MyComponent extends Vue {
compare = compare

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

Else:

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

vue docs

Vue automatically binds the this value for methods so that it always refers to the component instance.

See it in action codesandbox.io

Using VueJs to invoke a plugin from a .js file

Answer №1

Update:

Similar questions

Error: Vue page disappears mysteriously post-build

When using AngularJS services to pass data, the data may be lost when the page is refreshed

Dealing with the Spread operator in React and Redux causes issues

Error: Unable to retrieve data through Ajax request

Utilize dojo to manually trigger a window resize event

Difficulty encountered in closing dialog box upon clicking NavLink in React

Tips for distinguishing individual rows within a table that includes rowspans?

How to Trigger a Child Component Function from a Parent Component in React.js

What could be the reason for Jest flagging CSS as untested instead of identifying untested functions?

Why is the lifecycle callback not being triggered?

Is it possible to implement a component filter within a computed property in Vue?

Retrieving information from an Object within a JSON response

Contrasting the lib and es directories

Press anywhere on the screen to conceal the AngularJS element

Struggling with passing data to the API controller in Laravel when attempting to override sendResetLinkEmail with Vue and Vuex integrated

In JavaScript, what do we call the paradigm where a variable equals a variable equals a function? Let's take

Preventing text from wrapping in a TypeScript-generated form: Tips and tricks

Retrieving values with Jquery on a function's onClick event

Retrieving Data from Vue JS Store

The CSS transition duration is not being applied properly on the initial transition effect