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

Restart animation following a scroll occurrence

Issue with React Routes only occurring in the production website

Tips for minimizing the transfer time of large arrays using ajax

How to enable real-time file changes detection in sails for development

When to Utilize State Versus Getters in Vuex?

Tips for extracting information from Firebase and showing it on a Google gauge chart

Adjust grading system based on user interaction with JavaScript

Looking to retrieve the full browser URL in Next.js using getServerSideProps? Here's how to do

Activate Angular Material's autocomplete feature once the user has entered three characters

Setting up a div as a canvas in Three.js: Step-by-step guide

Guide on how to receive multiple responses from a single ajax request in PHP

Is it possible to utilize axios in Vue while utilizing CORS in the API?

What is the best method for transferring states between components?

Monitor the DOM for visibility changes in Selenium WebDriver and PjantomJS before proceeding

Guide to loading a minified file in Angular 2 with Gulp Uglify for TypeScript Bundled File minimization

Verify if the nested arrays within the object consist of any empty elements

Identifying overflow of text or elements in JavaScript during execution

Unable to transmit a collection of JavaScript objects in a node.js environment

The wrap() method in jQuery clones elements multiple times

Navigating through events within React