💡 Vue Typescript 状态管理：到 2022 年我们可以做得比“isLoading”更好

抱歉，标题太吸引人了，但我需要你的关注👀

您是否遇到过类似这样的代码：

new Vue({
  el: '#app',
  data () {
    return {
      info: null,
      loading: true,
      errored: false
    }
  },
  filters: {
    currencydecimal (value) {
      return value.toFixed(2)
    }
  },
  mounted () {
    axios
      .get('https://api.coindesk.com/v1/bpi/currentprice.json')
      .then(response => {
        this.info = response.data.bpi
      })
      .catch(error => {
        console.log(error)
        this.errored = true
      })
      .finally(() => this.loading = false)
  }
})

...

<div id="app">
  <h1>Bitcoin Price Index</h1>

  <section v-if="errored">
    <p>We're sorry, we're not able to retrieve this information at the moment, please try back later</p>
  </section>

  <section v-else>
    <div v-if="loading">Loading...</div>

    <div
      v-else
      v-for="currency in info"
      class="currency"
    >
      {{ currency.description }}:
      <span class="lighten">
        <span v-html="currency.symbol"></span>{{ currency.rate_float | currencydecimal }}
      </span>
    </div>

  </section>
</div>

这是我在 Vue 文档中找到的一个例子https://vuejs.org/v2/cookbook/using-axios-to-consume-apis.html#Dealing-with-Errors

如果有多个需要加载的内容，该如何添加loading2变量呢？👀

为了解决这个问题，你可以为每个异步操作使用一个变量，并设置以下 4 个“状态”：

IDLE ：用户尚未触发操作
等待：操作正在进行中
错误：出现错误
DONE ：操作成功

使用具有不同状态的枚举和更好的命名，代码可以重写如下：

enum AsyncState {
  IDLE = 'IDLE',
  WAITING = 'WAITING',
  ERROR = 'ERROR',
  DONE = 'DONE',
}

new Vue({
  el: '#app',
  data () {
    return {
      info: null,

      AsyncState,
      currentPriceLoadState: AsyncState.WAITING,
    }
  },
  filters: {
    currencydecimal (value) {
      return value.toFixed(2)
    }
  },
  mounted () {
    axios
      .get('https://api.coindesk.com/v1/bpi/currentprice.json')
      .then(response => {
        this.info = response.data.bpi
        this.currentPriceLoadState = AsyncState.DONE
      })
      .catch(error => {
        console.log(error)
        this.currentPriceLoadState = AsyncState.ERROR
      })
  }
})

...

<div id="app">
  <h1>Bitcoin Price Index</h1>

  <div v-if="currentPriceLoadState === AsyncState.WAITING">Loading...</div>
  <section v-else-if="currentPriceLoadState === AsyncState.ERROR">
    <p>We're sorry, we're not able to retrieve this information at the moment, please try back later</p>
  </section>

  <section v-else>
    <div v-for="currency in info" class="currency">
      {{ currency.description }}:
      <span class="lighten">
        <span v-html="currency.symbol"></span>{{ currency.rate_float | currencydecimal }}
      </span>
    </div>

  </section>
</div>

通过更好的命名和这个简单的枚举，您几乎可以涵盖所有需要加载一个或多个事物并管理错误的用例✨

如果您想管理不同的错误消息，您可以添加另一个具有枚举类型的变量，如下所示：

enum CurrentPriceLoadErrors {
  INVALID_CURRENCY = 'INVALID_CURRENCY',
  API_LIMIT_REACHED = 'API_LIMIT_REACHED',
  DEFAULT = 'DEFAULT',
}

请在评论部分告诉我您是否喜欢这个技巧，以及您是否有更好的技巧！

如果您喜欢这篇文章，请不要忘记点赞和分享💙

鏂囩珷鏉ユ簮锛�https://dev.to/monisnap/vue-typescript-state-management-we-can-do-better-than-isloading-in-2022-2n5d