Heim > Fragen und Antworten > Hauptteil
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粉7093078652023-11-01 12:51:46
我建议使用 Vue Use 库。它有一个非常好的模数,可以在 Vue.js 3 中将本地存储与 VueX/Pinia 一起使用。
https://view.org/core/useLocalStorage/