健康测试应用程序，它根据给出的答案返回一个分数

Question

下面是我的父组件: App.vue。我想知道我能对这里的代码做什么改进。

应用描述

这个应用程序是基于Vue.js框架构建的，并利用我创建的Laravel来获取自定义数据。它存储和跟踪您的“健康评分”，这是由您在测试中提交的答案决定的。每个答案都有一个值。因此，最不健康的答案的值为0，其次是最不健康的1，第二最健康的2，以及最健康的答案3。你提交的答案的值是通过本地存储在整个测试过程中汇总的。在回答完最后一个问题后，您的总健康分数将被返回。你的最后分数将决定你收到的信息。

<template>
  <div id="app">
    <div id="nav">
      <!--once the testData array has received its first element, then render the test data
      (this prevents error in dev tools)-->
      <router-view
        v-if="testData.length" 
        :currentTestData = testData[testDataIndex]
        :testDataIndex = testDataIndex
        :nextAndResetIndices="nextAndResetIndices"
        :selectAnswer="selectAnswer"
        :selectedIndex="selectedIndex"
        :submitAnswer="submitAnswer"
        :submittedIndex="submittedIndex"
        :healthScore="healthScore"
        :setStorage="setStorage"
        :getStorage="getStorage"
        :resetStorage="resetStorage"
        :message="message"
        :returnMessage="returnMessage"

      />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      testData: [],
      testDataIndex: 0,
      selectedIndex: null,
      submittedIndex: null,
      healthScore: 0,
      message: ''
    }
  },  
  methods: {
    nextAndResetIndices() {
      this.testDataIndex++
      this.selectedIndex = null
      this.submittedIndex = null
      // takes user to health score page
      if (this.testDataIndex > 6) {
        window.location.href = '/hs'
      }
    },
    selectAnswer(index) {
      this.selectedIndex = index
      console.log(index)
    },
    submitAnswer(selectedIndex) {
      this.submittedIndex = this.selectedIndex
      console.log(this.submittedIndex)
      // health score increments by the submitted index
      this.healthScore += this.submittedIndex
    },
    resetStorage() {
      localStorage.setItem('SavedHealthScore', 0)
    }
  },
  computed: {
    setStorage() {
      // prevents the stored health score from mimicing the original and reverting back to 0
      if (this.healthScore !== 0) {
        localStorage.setItem('SavedHealthScore', this.healthScore)
      }
    },
    getStorage() {
      this.healthScore = parseInt(localStorage.getItem('SavedHealthScore'))
    },
    toZero() {
      // returns the health score back to 0
      this.healthScore = 0
    },
    returnMessage() {
      if (this.healthScore < 8)
        this.message = 'Get to the hospital now! '
      else if (this.healthScore >= 8 && this.healthScore < 15)
        this.message = "Not bad. You'll probably live! ‍♂️"
      else 
        this.message = "You're very healthy. Congrats! ‍⚕️"
    }
  },
  mounted() {
    fetch('http://127.0.0.1:8000/api/testdata', {
    method: 'get'
  })
    .then((response) => {
    return response.json()
  })
    // 'jsonData' refers to the json parsed response
    .then((jsonData) => {
      this.testData = jsonData.data
  })
}}
</script>

Answer 1

如果你想保留你的实施计划，我只有一个很大的批评：

名字很重要

您的命名方案应该允许第三方粗略地了解您的代码。您有许多隐藏在函数中的鬼鬼祟祟的实现，这些实现不是在命名约定中表达的。

您的所有操作都是有状态的，这在技术上是可以的，但是您使用了大量的版本，这使得它们听起来像是带有实际return值的函数操作。所有函数都对有状态变量进行操作。您的命名约定应该通过使用动词短语来反映这一点，而不是名词。

resetStorage：一个很好的变量名。它是一个动词，作用在localStorage上

getStorage：误导。动词get的传统用法是检索值或执行计算(并对其进行return )。您正在分配this.healthScore。getStorage甚至没有return值。更贴切的名字应该是类似于setHealthScoreFromLocalStorage的名字。

toZero：究竟什么被设置为零？从您的其余代码(查看resetStorage)中，我可以推断出0的值是默认值。它应该更像resetHealthScore或clearHealthScore那样。

returnMessage：它正在更新this.message。所以更像updateHealthMessage？

Answer 2

通用反馈

这段代码看起来很不错，尽管安德鲁的回答指出中的许多名字都是误导的。我最大的抱怨是不能用分号来终止线路。虽然它们只是必需的在几次声明之后，但如果删除空白，可能会导致错误。默认终止行是一个很好的习惯。

建议

方法nextAndResetIndices()

在方法的末尾有一个条件块：

if (this.testDataIndex > 6) { window.location.href = '/hs‘}

也许应该将检查移到方法的开头，否则上面的行(除了增加this.testDataIndex的行)就没用了。如果要增量this.testDataIndex的行转换为前缀增量操作，则可以将其组合到条件检查中：

if (++this.testDataIndex > 6) {
  window.location.href = '/hs'
}

箭函数化简

可以简化mounted()中的承诺回调，因为具有单个语句的箭头函数不需要大括号。请记住，这意味着语句的返回值总是返回，但为此目的，这不会导致对最后一个回调产生任何不利影响。此外，在单个参数周围不需要使用括号。

这个街区：

http://127.0.0.1:8000/api/testdata‘( 'get‘}) .then((响应) => {返回response.json() }) // 'jsonData’指json解析的响应.then((jsonData) => { this.testData = jsonData.data })

可以简化为以下内容：

fetch('http://127.0.0.1:8000/api/testdata', {
  method: 'get'
})
.then(response => response.json())
// 'jsonData' refers to the json parsed response
.then(jsonData => this.testData = jsonData.data);