vue.js - Caching - watch, refs, and navigation behvior - Stack Overflow

admin管理员组

文章数量:1031308

I'm having this issue where I'm using Vue3 and Nuxt, and I need a loading function to run once everytime the user navigates to the page, but delay loading if the global data isn't available yet.

const depositsLoading = ref(true);
const fetchDeposits = async () => {
  //... Load locally dependent data
};


const stopCompaniesWatch = watch(
  () => companies.selected, // check to see if the global data that loads on app load is available
  (loaded) => {
    console.log('WATCHER RUNNING: ', loaded)
    if (loaded || companies.selected) { 
      console.log('LOADED TRUE')
      fetchDeposits();
      stopCompaniesWatch();
    }
  }
)

This code works as expected on page refresh, but not on page navigate away and navigate back (nav back). On nav back, the depositsLoading is set to true and the page is stuck in the loading state forever. Here's what I've learned happens on nav back:

• depositsLoading is true again telling me depositsLoading=ref(true) was ran again.
• No console.log statements run, telling me that the watch did not run again, even though the watch callback is supposed to be run once on page load.
• onMounted does not run.

So its like some of the setup tag reruns on nav back but not all of it?

My quesitons:

1. Why is this happening?
2. How do I make my page refecth locally dependent data on nav back?

MRE - no idea how to provide one as this question depends on navigation, so at the least it requires a whole nuxt server. If someone knows how I could provide this let me know.

I'm having this issue where I'm using Vue3 and Nuxt, and I need a loading function to run once everytime the user navigates to the page, but delay loading if the global data isn't available yet.

const depositsLoading = ref(true);
const fetchDeposits = async () => {
  //... Load locally dependent data
};


const stopCompaniesWatch = watch(
  () => companies.selected, // check to see if the global data that loads on app load is available
  (loaded) => {
    console.log('WATCHER RUNNING: ', loaded)
    if (loaded || companies.selected) { 
      console.log('LOADED TRUE')
      fetchDeposits();
      stopCompaniesWatch();
    }
  }
)

This code works as expected on page refresh, but not on page navigate away and navigate back (nav back). On nav back, the depositsLoading is set to true and the page is stuck in the loading state forever. Here's what I've learned happens on nav back:

• depositsLoading is true again telling me depositsLoading=ref(true) was ran again.
• No console.log statements run, telling me that the watch did not run again, even though the watch callback is supposed to be run once on page load.
• onMounted does not run.

So its like some of the setup tag reruns on nav back but not all of it?

My quesitons:

1. Why is this happening?
2. How do I make my page refecth locally dependent data on nav back?

MRE - no idea how to provide one as this question depends on navigation, so at the least it requires a whole nuxt server. If someone knows how I could provide this let me know.

• vue.js
• vuejs3
• nuxt.js
• nuxt3.js

Share Improve this question Follow edited Mar 4 at 22:53 Jamie Marshall asked Mar 4 at 22:48 Jamie MarshallJamie Marshall 2,32655 gold badges3838 silver badges6565 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

setup tag reruns

Of course setup will be reruned when you navigate back if this component is not keep alived

the watch callback is supposed to be run once on page load

The watch callback is not supposed to be run once on page load. It runs when you refresh the page because companies.selected changes from false to true. But when you navigate back, companies.selected is always true and won't trigger the watch callback. If you still want the callback to run, pass the immediate: true option. Ref: https://vuejs./guide/essentials/watchers.html#eager-watchers

Bonus

I would recommend https://vueuse./shared/until/#until if you are using Vueuse. Example:

;(async () => {
  await until(() => companies.selected).toBe(true)
  fetchDeposits();
})()

I'm having this issue where I'm using Vue3 and Nuxt, and I need a loading function to run once everytime the user navigates to the page, but delay loading if the global data isn't available yet.

const depositsLoading = ref(true);
const fetchDeposits = async () => {
  //... Load locally dependent data
};


const stopCompaniesWatch = watch(
  () => companies.selected, // check to see if the global data that loads on app load is available
  (loaded) => {
    console.log('WATCHER RUNNING: ', loaded)
    if (loaded || companies.selected) { 
      console.log('LOADED TRUE')
      fetchDeposits();
      stopCompaniesWatch();
    }
  }
)

This code works as expected on page refresh, but not on page navigate away and navigate back (nav back). On nav back, the depositsLoading is set to true and the page is stuck in the loading state forever. Here's what I've learned happens on nav back:

• depositsLoading is true again telling me depositsLoading=ref(true) was ran again.
• No console.log statements run, telling me that the watch did not run again, even though the watch callback is supposed to be run once on page load.
• onMounted does not run.

So its like some of the setup tag reruns on nav back but not all of it?

My quesitons:

1. Why is this happening?
2. How do I make my page refecth locally dependent data on nav back?

MRE - no idea how to provide one as this question depends on navigation, so at the least it requires a whole nuxt server. If someone knows how I could provide this let me know.

I'm having this issue where I'm using Vue3 and Nuxt, and I need a loading function to run once everytime the user navigates to the page, but delay loading if the global data isn't available yet.

const depositsLoading = ref(true);
const fetchDeposits = async () => {
  //... Load locally dependent data
};


const stopCompaniesWatch = watch(
  () => companies.selected, // check to see if the global data that loads on app load is available
  (loaded) => {
    console.log('WATCHER RUNNING: ', loaded)
    if (loaded || companies.selected) { 
      console.log('LOADED TRUE')
      fetchDeposits();
      stopCompaniesWatch();
    }
  }
)

This code works as expected on page refresh, but not on page navigate away and navigate back (nav back). On nav back, the depositsLoading is set to true and the page is stuck in the loading state forever. Here's what I've learned happens on nav back:

• depositsLoading is true again telling me depositsLoading=ref(true) was ran again.
• No console.log statements run, telling me that the watch did not run again, even though the watch callback is supposed to be run once on page load.
• onMounted does not run.

So its like some of the setup tag reruns on nav back but not all of it?

My quesitons:

1. Why is this happening?
2. How do I make my page refecth locally dependent data on nav back?

MRE - no idea how to provide one as this question depends on navigation, so at the least it requires a whole nuxt server. If someone knows how I could provide this let me know.

• vue.js
• vuejs3
• nuxt.js
• nuxt3.js

Share Improve this question Follow edited Mar 4 at 22:53 Jamie Marshall asked Mar 4 at 22:48 Jamie MarshallJamie Marshall 2,32655 gold badges3838 silver badges6565 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

setup tag reruns

Of course setup will be reruned when you navigate back if this component is not keep alived

the watch callback is supposed to be run once on page load

The watch callback is not supposed to be run once on page load. It runs when you refresh the page because companies.selected changes from false to true. But when you navigate back, companies.selected is always true and won't trigger the watch callback. If you still want the callback to run, pass the immediate: true option. Ref: https://vuejs./guide/essentials/watchers.html#eager-watchers

Bonus

I would recommend https://vueuse./shared/until/#until if you are using Vueuse. Example:

;(async () => {
  await until(() => companies.selected).toBe(true)
  fetchDeposits();
})()

本文标签： vuejsCachingwatchrefsand navigation behviorStack Overflow