This issue was moved to a discussion.
You can continue the conversation there. Go to discussion →
Component not updating (even though data is updated in devtools) when using external class to change data in Pinia Store [Nuxt 2/Bridge] #2582
Labels
Reproduction
https://github.com/millansingh/pinia-reactive-fail
Steps to reproduce the bug
The repository I linked shows reference code, but it is not a working repro. Creating a working repro of this is non-trivially difficult, as I'd have to repro or shim a lot of interconnecting code.
The repo has the following files:
There are two bugs, one of which I've managed to paper over with a manual $forceUpdate, the other which I cannot seem to fix.
Expected behavior
First bug:
When adding data in the external data fetcher, and calling the handler function to update the refs in the store, I expect the UI to show the updated keys (in the "NotWorking.vue" example file).
Second bug:
When deleting data from the external data fetcher, and again calling the handler function in the store, I expect the UI to show the keys without the one that was deleted.
Actual behavior
First bug:
The contents of the store ("brands") do not show up when added after startup. In the reference code, you'll see in the store that I "subscribe" to data (ie setup a websocket connection to fetch and update in the client on changes in the server - Firestore) only after verifying the current user.
Lines 11-13 of "Store.ts" are where I run a manual "forceUpdate" in order to get the new data to render after it's been fetched.
If I don't "forceUpdate" there, the data does not show in the UI, even though devtools shows the data is correct in both Pinia and the component's data.
Second bug:
When deleting data from the store, the UI does not render the new data (minus the one deleted). This is only fixed after either refreshing the page or navigating to a different page and then navigating back again (ie, forcing an update through other means). Again, the data shown in devtools for both Pinia and the component are correct. This is represented in the "NotWorking.vue" file.
In the "Working.vue" component, the keys array actually does update when I call the "testDelete" function. Again, it is relying on the "forceUpdate" on lines 22-24, but the keys array is modified in the UI after deleting the object.
Additional information
No response
The text was updated successfully, but these errors were encountered: