Maison > Questions et réponses > le corps du texte
Je suis un peu confus au sujet de localStorage et de son utilisation. J'ai un composant Statistic.vue qui affiche le modal à la fin.
Statistique.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') } }
Mon problème est que le dans Statistic.vuenumberOfGames
n'affiche pas le bon numéro, après avoir chargé la page, il affiche la valeur correcte sinon il laisse 1.
P粉7093078652023-11-01 12:51:46
Je recommande d'utiliser la bibliothèque Vue Use. Il a un très bon module pour utiliser le stockage local avec VueX/Pinia dans Vue.js 3.
https://view.org/core/useLocalStorage/