如何在localStorage上使用Vuejs3？

Question

我对localStorage和使用它感到有点困惑。我有一个Statistic.vue，它在结尾处显示模态。

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')
   }
}

我的问题是，Statistic.vue中的numberOfGames没有显示正确的数字，而且加载页面时会显示正确的值，否则会落后1。

Answer 1

我建议使用Vue Use库。它在Vue.js 3中使用VueX/Pinia的本地存储模块非常好。

https://vueuse.org/core/useLocalStorage/

Answer 2

localStorage只用于跨刷新的持久化状态，它本机不适用于Vue的反应性。相反，您可以将numberOfGames保存为vuex状态的一部分，并将数据变量设置为该状态。仍然可以使用localStorage号初始化存储变量。