面试题：Vue Pinia中如何在action里处理异步逻辑并更新状态

Question

假设在一个Vue应用中使用Pinia管理状态，现在有一个需求，需要从后端获取用户的详细信息并更新到Pinia的store中。请简述使用Pinia处理该异步逻辑的步骤，并给出关键代码示例。

Answer 1

步骤

1. 创建Pinia store：定义一个包含用户信息状态和更新用户信息方法的store。
2. 发起异步请求：在store的方法中使用合适的HTTP库（如axios）向后端发起获取用户详细信息的请求。
3. 更新状态：请求成功后，将获取到的数据更新到store的用户信息状态中。

关键代码示例

1. 创建Pinia store

import { defineStore } from 'pinia'
import axios from 'axios'

export const useUserStore = defineStore('user', {
  state: () => ({
    userInfo: null
  }),
  actions: {
    async fetchUserInfo() {
      try {
        const response = await axios.get('/api/user/details')
        this.userInfo = response.data
      } catch (error) {
        console.error('Error fetching user info:', error)
      }
    }
  }
})

2. 在组件中使用

<template>
  <div>
    <button @click="fetchUser">获取用户信息</button>
    <div v-if="userStore.userInfo">
      <p>用户名: {{ userStore.userInfo.username }}</p>
      <p>邮箱: {{ userStore.userInfo.email }}</p>
    </div>
  </div>
</template>

<script setup>
import { useUserStore } from '@/stores/user'

const userStore = useUserStore()

const fetchUser = async () => {
  await userStore.fetchUserInfo()
}
</script>