Vue.js健康测验应用：如何避免本地存储健康分数重置为0？

嘿，我明白你的困扰了——咱们不用Vuex，就用localStorage搞定这个问题！

首先得说说你当前代码的问题：你用计算属性来存和取分数，但这个写法其实有问题。你写的setHealthScore是一个计算属性的getter（不是setter哦），组件一初始化就会执行它，这时候healthScore的初始值是0，直接就把localStorage里的旧值给覆盖成0了，这就是为什么结果页总是显示0的原因！

那怎么改呢？咱们换个思路，用**监听属性（watch）**来保存分数，再在组件初始化时从localStorage读取之前的值，这样就不会被重置了。

第一步：修改测验页面的代码 #

把你的computed换成watch，再加上created钩子初始化分数：

data() { 
  return { 
    testData: [], 
    testDataIndex: 0, 
    selectedIndex: null, 
    submittedIndex: null, 
    healthScore: 0, 
  } 
},
// 组件创建时，先从localStorage读取之前保存的分数
created() {
  const savedScore = localStorage.getItem('SavedHealthScore');
  // 如果有保存的分数，就赋值给healthScore（注意转成数字，因为localStorage存的是字符串）
  if (savedScore !== null) {
    this.healthScore = parseInt(savedScore, 10);
  }
},
// 监听healthScore的变化，只有当分数真正改变时才保存到localStorage
watch: {
  healthScore(newScore) {
    localStorage.setItem('SavedHealthScore', newScore);
  }
}

第二步：修改结果页的代码 #

结果页需要在初始化时读取localStorage里的最终分数，这样才能正确展示：

data() {
  return {
    finalHealthScore: 0,
    maxScore: 21 // 你的满分是21对吧
  }
},
created() {
  const savedScore = localStorage.getItem('SavedHealthScore');
  if (savedScore !== null) {
    this.finalHealthScore = parseInt(savedScore, 10);
  }
}

为什么这样管用？ #

1. 初始化读取：组件一创建就先从localStorage拿之前的分数，不会用初始的0覆盖旧值。
2. 按需保存：只有当用户答题导致healthScore变化时，watch才会触发保存操作，不会在初始化时乱存0。

额外小提示 #

如果用户重新开始测验时需要重置分数，你可以加一个重置按钮，点击时执行：

resetQuiz() {
  this.healthScore = 0;
  localStorage.removeItem('SavedHealthScore'); // 或者直接存0
}

内容的提问来源于stack exchange，提问作者user12037570