如何在异步api调用后使用vuex getter

// user.js（Vuex 模块）
const user = {
  state: {
    userData: null
  },
  getters: {
    getUserData: state => state.userData
  },
  mutations: {
    setUserData: (state, data) => {
      state.userData = data
    }
  },
  actions: {
    fetchUserData: ({ commit }) => {
      // 异步 API 调用
      // 假设使用 axios 发起请求
      axios.get('/api/user')
        .then(response => {
          commit('setUserData', response.data)
        })
        .catch(error => {
          console.error(error)
        })
    }
  }
}

import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters('user', ['getUserData'])
  },
  mounted() {
    this.$store.dispatch('user/fetchUserData')
  }
}

<template>
  <div>
    <p>{{ getUserData }}</p>
  </div>
</template>