मैं NuxtJS का उपयोग कर रहा हूं और मेरे पास एक NavBar है जो /website?web=1 और /website?web=2 पर जाता है.. जब मैं /website?web=1 से /website?web=2 पर जाता हूं तो इसके विपरीत.. मेरा async fetch बिल्कुल नहीं चल रहा है।

website.vue

async fetch({ store, error, route, params }) {
    let parameters;
    const pageLimit = store.state.websites.pageLimit;
    const offset = params.id ? (params.id - 1) * pageLimit : 0;
    const web = route.query.web;
    try {
      if (web === "1") {
        parameters = `?&is_global=true&offset=${offset}&limit=${pageLimit}`;
      } else if (web === "2") {
        parameters = `?&is_global=false&offset=${offset}&limit=${pageLimit}`;
      } else {
        parameters = `?co_id=${
          route.query.co_id ? route.query.co_id : ""
        }&ca_id=${
          route.query.ca_id ? route.query.ca_id : ""
        }&limit=${pageLimit}&offset=${offset}`;
      }
      await Promise.all([

        store.dispatch("websites/fetchWebsites", parameters)
      ]);
    } catch (e) {
      console.log("Error: " + e);
    }
  },

NavBar.vue

methods: {
    handleClick(tab, event) {
      switch (tab.label) {
        case "1":
          this.$router.push({ name: "index" });
          break;
        case "2":
          this.$router.push("/country");
          break;
        case "3":
          this.$router.push("/website?web=1");
          break;
        case "4":
          this.$router.push("/website?web=2");
          break;
      }
    }
  }
1
Dean Christian Armada 24 मार्च 2020, 07:41
 – 
Phil
24 मार्च 2020, 07:55
यह भी देखें आवश्यक/…
 – 
Phil
24 मार्च 2020, 07:55

2 जवाब

async fetch जीवनचक्र query / param अपडेट का आह्वान नहीं है

कभी-कभी आप केवल डेटा लाना चाहते हैं और इसे सर्वर पर प्री-रेंडर करना चाहते हैं स्टोर का उपयोग किए बिना। asyncData को लोड करने से पहले हर बार कॉल किया जाता है पृष्ठ घटक। इसे एक बार सर्वर-साइड कहा जाएगा (पहले पर Nuxt ऐप के लिए अनुरोध) और क्लाइंट-साइड आगे नेविगेट करते समय मार्ग doc

साथ ही, एक घटक query / param अपडेट पर रिमाउंट नहीं करता है, इसलिए जीवनचक्र जैसे created / mounted / beforeCreate आदि भी नहीं हैं फिर से आमंत्रित। यह एप्लिकेशन के प्रदर्शन में मदद करता है क्योंकि यह पूरे पृष्ठ के अनावश्यक रेंडरिंग से बचा जाता है जहां कुछ डेटा परिवर्तन काम करेंगे।

एक सामान्य तरीका बनाएं

methods: {
 fetchData ({ store, error, route, params }) {
  // your fetch logic here
  let parameters;
  const pageLimit = store.state.websites.pageLimit;
  // ...
 }
}

विधि को async data में कॉल करें

async fetch({ store, error, route, params }) {
 this.fetchData({ store, error, route, params })
}

क्वेरी बदलने पर विधि को फिर से कॉल करें

watch: {
  "$route.query.web": {
    handler () {
      this.fetchData({ store: this.$store, route: this.$route... });
    }
  },

देखने का विकल्प

beforeRouteUpdate (to, from, next) {
 if (from.name === to.name) { // Call fn only when: route hasn't changed instead just query / params for the route has changed
  this.fetchData({ store: this.$store, route: this.$route... })
 }
},
1
Shivam Singh 24 मार्च 2020, 09:05
1
उत्तर के लिए धन्यवाद लेकिन मैं एक बेहतर उत्तर के साथ आया हूं
 – 
Dean Christian Armada
24 मार्च 2020, 15:22
एफवाईआई, स्पष्ट होने के लिए, async fetch और async asyncData दो अलग-अलग चीजें हैं; दस्तावेज़ देखें
 – 
MarsAndBack
20 जून 2021, 16:01

Nuxt's fetch() का उपयोग करते समय, आपको मार्ग परिवर्तनों को सुनने के लिए एक स्पष्ट द्रष्टा की आवश्यकता होती है।

एक Nuxt घटक के लिए जिसमें async fetch() है, यदि आप चाहते हैं कि मार्ग बदलने पर इसे अपडेट किया जाए, तो एक मानक वॉचर सेट करें।

दस्तावेज़ देखें: https://nuxtjs .org/docs/2.x/features/data-fetching#listening-to-query-string-changes

export default {

  watch: {
      '$route.query': '$fetch'   // This runs $fetch, defined below
  },

  async fetch() {
      // Runs on server load (SSR), or when called (see above)
  }

}

अन्य संदर्भों के लिए (या अगले 2.12 से पहले):

आप watchQuery का उपयोग करके एक्सप्लोर कर सकते हैं।

दस्तावेज़ देखें: https://nuxtjs.org/docs/2. x/घटक-शब्दावली/पेज-वॉचक्वेरी/

export default {

  watchQuery(newQuery, oldQuery) {
    // Only execute component methods if the old query string contained `bar`
    // and the new query string contains `foo`
    return newQuery.foo && oldQuery.bar
  }

}

https://nuxtjs.org/docs/2.x/components-glossary/pages-watchquery/

1
MarsAndBack 20 जून 2021, 16:17
अच्छा! तो, क्या यह टेम्पलेट को फिर से प्रस्तुत करता है या केवल अपडेट किए गए डेटा को अपडेट करता है?
 – 
Shivam Singh
24 मार्च 2020, 16:29
1
यह पुन: प्रस्तुत करता है। अच्छी बात यह है कि NuxtJS के पास इससे निपटने का अपना मूल तरीका है .. अन्यथा मैं चौकीदार का उपयोग करूंगा
 – 
Dean Christian Armada
25 मार्च 2020, 05:59
वैकल्पिक रूप से, आप एक नियमित watch का भी उपयोग कर सकते हैं; दस्तावेज़ देखें
 – 
MarsAndBack
20 जून 2021, 16:00