I'm a little confused about localStorage and its usage. I have a comonentStatistic.vuewhich displays modal at the end.
Statistic.vue
{{numberOfGames}}
index.js
export default createStore({ state: { currentGuessIndex: 0, isWinner: false }, mutations: { checkNumberOfGames(state) { if (localStorage.getItem("NumberOfGames") === null) { localStorage.setItem("NumberOfGames", 1) } else if (state.currentGuessIndex >= 6 || state.isWinner) { let counter = localStorage.getItem("NumberOfGames"); localStorage.setItem("NumberOfGames", parseInt(counter)+1) } } }, actions: { }, modules: { } })
WordRow.vue
// some stuff watch: { submitted: { async handler(submitted) { //some stuff this.$store.commit('checkNumberOfGames') } }
My problem is that thenumberOfGamesinStatistic.vueis not showing the correct number, after loading the page it shows the correct value otherwise it leaves 1.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
I recommend using the Vue Use library. It has a very good modulus for using local storage with VueX/Pinia in Vue.js 3.
https://view.org/core/useLocalStorage/