Open cnotv opened 10 months ago
@eva-vashkevich suggested moving the logic of fetch()
within the beforeMount()
lifecycle hook by wrapping the evaluation within a promise as a proven solution in some cases.
The whole fetch()
deprecation would include these considerations:
async setup()
is not possible due these restrictions:
async setup()
, e.g. from data()
$fetch()
is adopted in more circumstances and will need to be replaced as wellfetch()
is added from a mixin altogether with other elements, which should also be removed:
state
which includes errors
, pending
, and timestamp
$fetchState
which returns the state
beforeCreate()
is used to assign $fetch()
vue-router
data fetching hook, although it does not cover components and the current logic may not fit After analyzing the hackish implementation of Nuxt to create the fetch()
"hook", I have been trying to create a PoC on Vue3 and it seems feasible the possibility to have an async fetch()
also there.
https://codesandbox.io/s/vue3-vuex-custom-hook-yjghfv?file=/src/views/Home.vue
NOTE: This is available exclusively using Options API and not inside setup @rak-phillip .
I am postponing then this refactoring after migration to Vue3 and keeping it open to define guidelines for the alternatives of fetch()
.
Did we not say we were going to remove this? Because of the way it's written, I am not so sure is going to work with Vue3.
What's the purpose of this code? I have seen it outside of the fetch.js
file, so I considered was a secondary purpose.
Also thanks for pointing it out.
@cnotv do we understand the purpose of the code related to invoking fetch on HMR1 and matching routes2?
Just for the record, could we write down an update of what is the current issue after isolating the fetch()
logic?
It would be nice to keep consistent clear information about the current state.
Even a link to something else where it has been already written is fine.
Ok so to summarize, we have this code coming from Nuxt which we are not able to identify the whole purpose. Therefore we'll rather try to recreate some further PoC based on our code. This should ensure the right execution of the lifecycle hooks and related loading components. The outcome will be to get rid of everything else.
Description
As the Nuxt world is departed, we should replace data fetching in the Vue3 way: https://vuejs.org/guide/built-ins/suspense.html#async-setup
The feature is not supported in Vue 2.7 https://v2.vuejs.org/v2/guide/migration-vue-2-7
The pattern is so specifically intended to have it as essential rule in the linter: https://eslint.vuejs.org/rules/no-lifecycle-after-await.html