Understanding Reactivity with Pinia Store and Data Loading
Hello,
I have the major problem, that loading data and set it to a store will not render instantly the page where this data is used. I have gone through several refactorings until i had the state that the page is rendered correct after switching from one page to another.
I tried to bring it down to a minimal reproduction on stackblitz https://stackblitz.com/edit/data-load-persistance?file=pages%2Findex.vue
Reproduction:
1. Go to the upper link. Wait until started. After rendering there is no list. - There should be.
* The header section shows two values "Is data loaded" and "Is data null", while the terminal shows a server-side console.log output. There you will see that the list has been generated, and further console.log outputs on the client show that it runs through the composables that load the list and set it into the store.
But the values rendered do not mirror that.
2. Click on the Navigation link to Page 2
The value for "Is Data null" changes to false. I do not load data on that page, but now it seems to get the value correctly
3. Click on the Index link
4. There is the list ... what and why????
5. Click on the refresh button of stackblitz . It does like a F5 browser refresh for the app.
The data is gone again.
I had some tryouts with the two button in the debug navigation: to load the data or force an part rendering of reactive values. You can click on it but nothing changes.
I think there is something basic i miss using Nuxt/Vue or Pinia? I'm not shure where this problems comes from, so this is my first point to ask for helping me understand what is going on here.
I have the major problem, that loading data and set it to a store will not render instantly the page where this data is used. I have gone through several refactorings until i had the state that the page is rendered correct after switching from one page to another.
I tried to bring it down to a minimal reproduction on stackblitz https://stackblitz.com/edit/data-load-persistance?file=pages%2Findex.vue
Reproduction:
1. Go to the upper link. Wait until started. After rendering there is no list. - There should be.
* The header section shows two values "Is data loaded" and "Is data null", while the terminal shows a server-side console.log output. There you will see that the list has been generated, and further console.log outputs on the client show that it runs through the composables that load the list and set it into the store.
But the values rendered do not mirror that.
2. Click on the Navigation link to Page 2
The value for "Is Data null" changes to false. I do not load data on that page, but now it seems to get the value correctly
3. Click on the Index link
4. There is the list ... what and why????
5. Click on the refresh button of stackblitz . It does like a F5 browser refresh for the app.
The data is gone again.
I had some tryouts with the two button in the debug navigation: to load the data or force an part rendering of reactive values. You can click on it but nothing changes.
I think there is something basic i miss using Nuxt/Vue or Pinia? I'm not shure where this problems comes from, so this is my first point to ask for helping me understand what is going on here.
