异步数据

涉及 Promise 知识领域。

// 以下为假设数据
// type 定义类型 使用 <User> 来限定对象类型
type User = {
  name:string,
  age:number
}
// 模拟 异步请求数据
const login = ():Promise<User> => { // 返回Promise,并指定类型
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        // 对象数据
        name: '老手队2',
        age: 202
      })
    }, 2000) // 2000延时
  })
}

实现

// Xxxx.ts
actions: {
    changeB(num:Number) {
      this.user.age = num
    },
    setUser() {
      this.user = result
    },
    // 异步数据处理
    async setUsers() { // 异步必须使用 async
      const info = await login() // 异步必须使用 await
      this.user = info
      // 可以调用其他方法
      this.changeB(26)
    }
  }

<template>
  <view class="content">
    <view>用户: {{ user.name }}</view>
    <view>年龄: {{ user.age }}</view>
    <button @click="setUser">设置用户</button>
    <button @click="setUserss">异步设置用户</button>
  </view>
</template>

<script setup lang="ts">
import { storeToRefs } from 'pinia'
import { useXxxxStore } from '@/stores/Xxxx'
const Xxxx = useXxxxStore()

const setUser = () => {
  Xxxx.setUser()
}

const setUserss = () => {
  Xxxx.setUsers()
}
</script>