Bagaimana untuk menggunakan localStorage pada Vuejs3?
Saya agak keliru tentang localStorage dan penggunaannya. Saya mempunyai komponen Statistic.vue yang memaparkan modal pada penghujung.
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')
}
}
Masalah saya ialah dalam Statistic.vuenumberOfGames tidak menunjukkan nombor yang betul, selepas memuatkan halaman ia menunjukkan nilai yang betul jika tidak ia meninggalkan 1.
