Le modèle ne peut pas capturer le contenu de la propriété calculée, mais le hook de cycle de vie peut l'enregistrer normalement

Question

Je crée une boutique en ligne où vous pouvez choisir de commander des produits sans interférer avec le contenu de votre panier. La façon dont je le mets en œuvre consiste à partager une page pour les articles du panier et les produits individuels. Il vérifie si le paramètre productID est défini et si c'est le cas, utilise des données différentes.

Voici la fonction que j'ai écrite :

 calculé : {
        produits : fonction() {
            if ( this.$route.query.pid ) {
                var produit = [{}]
                axios.get(`/api/products/${this.pid}`).then(response => {
                    produit[0].id = réponse.data[0].id
                    produit[0].name = réponse.data[0].name
                    produit[0].units = réponse.data[0].units
                    produit[0].image = réponse.data[0].product_image[0].image
                    produit[0].prix = réponse.data[0].prix
                    produit[0].quantité = 1
                })
                retourner Object.assign (produit)
            } autre {
                renvoie ceci.$store.state.cart
            }
        }
    },
≪/pré>
Il s'agit du hook de cycle de vie (beforeMount) qui obtient avec succès les données : 
 avantMontage() {
        console.log(this.products)
    }
≪/pré>
Le problème est maintenant que l'attribut products est considéré comme vide dans le modèle. Lorsque j'accède à la page sans paramètres de requête, tout fonctionne correctement, je ne trouve tout simplement pas les données calculées pour les produits individuels. 
Comment résoudre ce problème ? Merci d'avance pour votre aide! 

Answer 1

vue/no-async-in-computed-properties

Les propriétés ne sont pas capturées dans les modèles, mais les hooks de cycle de vie peuvent obtenir des données via les propriétés calculées

La raison pour laquelle vous voyez cela dans la console est que la plupart des navigateurs modernes enregistrent les objets sous forme de données en direct (une fois l'objet mis à jour, la console se met également à jour). Donc ce que vous voyez dans la console n'est pas console.log执行时对象的值，而是稍后的值。你可以通过使用console.log(JSON.parse(JSON.stringify(this.products))) pour confirmer cela...

Pour résoudre ce problème, utilisez watch而不是computed

data() {
  return {
    products: []
  }
},
watch: {
  '$route.query.pid': {
    handler: function(newValue) {
      if(newValue) {
        axios.get(`/api/products/${newValue}`).then(response => {
          var product = {
            id: response.data[0].id,
            name: response.data[0].name,
            units: response.data[0].units
            image: response.data[0].product_image[0].image
            price: response.data[0].price
            quantity: 1
          }
          this.products = []
          this.products.push(product)
      } else this.products = this.$store.state.cart
    },
    immediate: true
  }
},