Heim  >  Fragen und Antworten  >  Hauptteil

Wie verwende ich localStorage auf Vuejs3?

Ich bin etwas verwirrt über localStorage und seine Verwendung. Ich habe eine Komponente Statistic.vue, die am Ende modal anzeigt.

Statistic.vue

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

<script>
export default {
    name: "GameStatistic",
    data() {
       return {
            numberOfGames: localStorage.getItem("NumberOfGames")
       } 
    },
    mounted() {
        //this.$store.commit('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.commit('checkNumberOfGames')
   }
}

Mein Problem ist, dass das in Statistic.vuenumberOfGames nicht die richtige Zahl anzeigt. Nach dem Laden der Seite wird der richtige Wert angezeigt, andernfalls bleibt 1 übrig.

P粉418351692P粉418351692375 Tage vor736

Antworte allen(1)Ich werde antworten

  • P粉709307865

    P粉7093078652023-11-01 12:51:46

    我建议使用 Vue Use 库。它有一个非常好的模数,可以在 Vue.js 3 中将本地存储与 VueX/Pinia 一起使用。

    https://view.org/core/useLocalStorage/

    Antwort
    0
  • StornierenAntwort