251 Better UX Loading Spinner & Error Handling

步骤

1、添加变量查看是否正在加载以及是否有报错

data() {
    return {
      email: '',
      password: '',
      formIsValid: true,
      mode: 'login',
      isLoading: false,
      error: null
    };
  },

2、submitForm()方法中，在发送http request前后添加是否正在加载的状态

async submitForm() {
      this.formIsValid = true;
      if (
        this.email === '' ||
        !this.email.includes('@') ||
        this.password.length < 6
      ) {
        this.formIsValid = false;
        return;
      }

      this.isLoading = true;
      try {
        // send http request...
        if (this.mode === 'login') {
          console.log('Logging in...');
        } else {
          console.log('Signing up...');
          await this.$store.dispatch('signup', { email: this.email, password: this.password });
        }
      } catch (error) {
        this.error = error.message || 'Failed to authenticate, try later.';
      }
      this.isLoading = false;
    },

3、添加报错和验证显示

<base-dialog :show="!!error" title="An error occurred" @close="handleError">
  <p>{{ error }}</p>
</base-dialog>
<base-dialog :show="isLoading" title="Authenticating..." fixed>
  <base-spinner></base-spinner>
</base-dialog>