Pinia state not updating in Vue.js devtools

I am using a simple Pinia setup with my app. Maybe worth noting that I am using the options API and vanilla Javascript.

Everything works fantastic, but what worries me is that when I watch Pinia in Vue.js devtools, the state never updates, although it is clearly changed in the app, otherwise it would not be running smoothly.

I have the suspicion that there is something wrong with my Pinia setup, so maybe the store that I am seeing in devtools is not the one my app is using.

Here is how my setup looks:


const pinia = createPinia();

const useStore = defineStore('',{
  state() {return {
    // stuff
  }
});

const _store = useStore(pinia);

function getStore() {
  return _store;
}

export {
  getStore
}

Can someone with more experience tell me if there is anything suspicious in my setup or if the lack of update in Devtools could have a different cause? Thanks.

1 Like

It looks like there were two issues:

  • In order to update the displayed pinia store, one has to click on the store. It will then update. This is fine, did not know this.
  • Using shallowRef() will result in null being displayed as a state value in devtools. This may be a bug. I will check in the issues list and post a new one if I cannot find anthying.
1 Like