Forum : TypeError: _this is undefined

Bonjour,
J'ai un souci avec mon appli Nuxt JS.
J'ai tenté de mettre un morceau de code "à part" car je l'utilise plusieurs fois. Il s'agit d'un appel à mon API. Au départ, je l'avais mis simplement comme ceci dans mon composant :

 methods: {
    setIdStudy(study) {
            //GET data of the study to store in store
axios.get(process.env.baseUrl + 'studies/' + study)
        .then((res)=>{
          this.$store.commit("setDataStudy", res.data)

        }).catch(err=>console.log(err))

    }

  }

Ce qui fonctionnait parfaitement.
Seulement j'ai voulu mettre cet appel dans un fichier à part que j'ai mis dans le dossier "services"
J'ai donc fait :

import axios from "axios";

export function findDataOfOneStudy (study) {
  axios.get(process.env.baseUrl + 'studies/' + study)
    .then((res)=>{
      this.$store.commit("setDataStudy", res.data)
      console.log("p")

    }).catch(err=>console.log(err))
}

Et je l'ai appelé dans mon composant en fìsant :

methods: {

    setIdStudy(study) {
      findDataOfOneStudy(study)
       }
  }

Seulement voilà, en faisant ça, je perd le contexte et THIS n'est pas défini comme le suggère l'erreur que j'obtiens dans ma console (erreur dans l'objet de ce message).
L'appel GET se fait correctement par contre. Mais du coup, je n'ai pas le commit dans le store.

Comment faire pour lui redonner le contexte ?

Merci beaucoup pour votre aide.

2 réponses

Balsakup

Salut, tu peux forcer le contexte avec la méthode bind https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

methods: {
    setIdStudy(study) {
        findDataOfOneStudy.bind(this, study)();
    }
}

Jako

Auteur

Bonjour merci pour cette réponse.
Je n'ai pas testé ta solution mais j'ai mis ça dans mon composant :

this.$store.dispatch("findDataOfOneStudy", study)

Puis dans mon store :


export const actions = {
  async findDataOfOneStudy({ commit }, study) {
    const resultat = await axios.get(process.env.baseUrl + "studies/" + study)
    const studyData = resultat.data

    /* -- other way to write the code above (destructuring in javascript)

      const { data: studyData } = await axios.get(
        process.env.baseUrl + "studies/" + study
      );

    */
    commit("setDataStudy", studyData);
  },
};

Merci !