I am a bit confused about localStorage and using it. I have a copmonent Statistic.vue which shows modal at the end.

Statistic.vue

<template>
 <p class='modal'>{{numberOfGames}}<p>
<template/>

<script>
export default {
    name: "GameStatistic",
    data() {
       return {
            numberOfGames: localStorage.getItem("NumberOfGames")
       } 
    },
    mounted() {
        //this.$storemit('checkNumberOfGames')
    },
}
</script>

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.$storemit('checkNumberOfGames')
   }
}

My question is that numberOfGames in Statistic.vue not showing correct number, alfter loading page it shows correct value otherwise it lefts behind by 1.

I am a bit confused about localStorage and using it. I have a copmonent Statistic.vue which shows modal at the end.

Statistic.vue

<template>
 <p class='modal'>{{numberOfGames}}<p>
<template/>

<script>
export default {
    name: "GameStatistic",
    data() {
       return {
            numberOfGames: localStorage.getItem("NumberOfGames")
       } 
    },
    mounted() {
        //this.$store.mit('checkNumberOfGames')
    },
}
</script>

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.mit('checkNumberOfGames')
   }
}

My question is that numberOfGames in Statistic.vue not showing correct number, alfter loading page it shows correct value otherwise it lefts behind by 1.

• javascript
• vue.js
• local-storage
• vuejs3

• The same way as anywhere else. numberOfGames shows the correct number. It's the value you've got in data. In case you expected it to be reactive, the expectations are wrong, it physically cannot be. It's a mistake to use setItem INSTEAD of changing state in a store. state should be the source of data, and it needs to be synchronized with localStorage. The question doesn't mention the store like it's not important. It looks like Vuex and you can use Vuex persistent plugin for that. – Estus Flask Commented Aug 23, 2022 at 12:17
• @EstusFlask Can you show by code example please, I am very new to Vuejs – mirodil Commented Aug 24, 2022 at 11:51

3 Answers 3

I remend using the Vue Use library. It has o pretty nice modulo for using Local Storage with VueX/Pinia in Vue.js 3.

https://vueuse/core/useLocalStorage/

localStorage is meant only for persisting state across refreshes, it doesn't natively work with Vue's reactivity. Instead you can save numberOfGames as part of your vuex state and set your data variable to that. You can still initialize the store variable with the localStorage number.

I remend using vue use useLocalStorage:

That's how you can set it

import { useLocalStorage } from '@vueuse/core' 

const numberOfGames = useLocalStorage('NumberOfGames', 1, {
      mergeDefaults: true
    })

and if you wanna change the value:

numberOfGames.value = parseInt(counter)+1

That's how you can use it

console.log(numberOfGames.value)