Vue3+Pinia中无法访问Action返回对象属性该如何解决？

在Vue3项目中使用Mockjs模拟后端数据，通过Pinia的Action获取异步数据。在Profile.vue组件调用Pinia store时，仅返回对象能正常显示，但尝试获取返回对象的onlineStatusText属性时出现错误。将store调用移至子组件后问题依旧，推测是页面渲染时数据尚未加载完成。需要解决如何确保数据就绪后再渲染页面，或通过监听属性变化处理该问题。

相关代码 #

Mockjs配置 #

{
  "url": "/mockApi/system",
  "method": "get", 
  "timeout": 500,
  "statusCode": 200,
  "response": {
    "status": 200,
    "message": "ok",
    "data": {
      "onlineStatus|3": [{
        "statusId": "@integer(1,3)",
        "onlineStatusText": "@ctitle(3)",
        "onlineStatusIcon": "Random.image('20*20')",
        "createTime": "@datetime"
      }],
      "websiteInfo": [{
        "id|+1": 1
      }]
    }
  }
}

Pinia Store代码 #

import axios from "axios"
import { defineStore } from "pinia"

export const useSystem = defineStore('System', {
  state: () => {
    return {
      systemConfig: {
        onlineStatus: [],
      },
    }
  },
  actions: {
    getSystemConfig() {
      const axiosInstance = axios.interceptors.request.use(function (config) {
        config.baseURL = '/mockApi'
        return config
      }, function (error) {
        return Promise.reject(error);
      })
      axios.get('/system/').then(res => {
        this.systemConfig.onlineStatus = res.data.data.onlineStatus
      })
      axios.interceptors.request.eject(axiosInstance)
    }
  }
})

Profile.vue组件代码 #

export default {
  setup() {
    const systemConfigStore = useSystem()
    systemConfigStore.getSystemConfig()
    const { systemConfig } = storeToRefs(systemConfigStore)

    return {
      systemConfig,
    }
  },
  computed: {
    getUserOnlineStatusIndex() {
      return this.userData.onlineStatus // 1-3的整数
    },
    getUserOnlineStatus() {
      return this.systemConfig.onlineStatus
    },
    showUserOnlineStatusText() {
      return this.getUserOnlineStatus[this.getUserOnlineStatusIndex - 1]['onlineStatusText'] // 修改此处后报错
    },
  },
  components: { UserOnlineStatus }
}

1. 使用可选链操作符避免空值访问 #

直接在计算属性中添加可选链，防止数据未加载时访问不存在的属性报错，同时可设置默认值优化体验：

showUserOnlineStatusText() {
  return this.getUserOnlineStatus[this.getUserOnlineStatusIndex - 1]?.onlineStatusText || '加载中...'
}

可选链?.会在左侧值为undefined或null时直接返回undefined，不会抛出错误。

2. 条件渲染控制页面显示 #

在模板中通过v-if判断数据是否就绪，仅当onlineStatus数组有内容时才渲染相关部分：

<template>
  <div v-if="getUserOnlineStatus.length > 0">
    {{ showUserOnlineStatusText }}
  </div>
  <div v-else>
    加载中...
  </div>
</template>

3. 改造Pinia Action为异步函数并等待加载 #

修改Pinia的getSystemConfig返回Promise，在组件中等待数据加载完成后再渲染：

改造后的Pinia Store #

actions: {
  async getSystemConfig() {
    const axiosInstance = axios.interceptors.request.use(function (config) {
      config.baseURL = '/mockApi'
      return config
    }, function (error) {
      return Promise.reject(error);
    })
    try {
      const res = await axios.get('/system/')
      this.systemConfig.onlineStatus = res.data.data.onlineStatus
    } catch (err) {
      console.error('获取系统配置失败:', err)
    } finally {
      axios.interceptors.request.eject(axiosInstance)
    }
  }
}

组件中等待数据加载 #

import { onMounted, ref } from 'vue'

export default {
  setup() {
    const systemConfigStore = useSystem()
    const { systemConfig } = storeToRefs(systemConfigStore)
    const isLoaded = ref(false)

    async function initData() {
      await systemConfigStore.getSystemConfig()
      isLoaded.value = true
    }

    onMounted(() => {
      initData()
    })

    return {
      systemConfig,
      isLoaded
    }
  },
  // 其余代码不变
}

模板中用v-if="isLoaded"控制渲染区域。

4. 使用watch监听数据变化 #

监听systemConfig.onlineStatus的变化，数据更新后再处理状态文本：

import { watch, ref } from 'vue'

export default {
  setup() {
    const systemConfigStore = useSystem()
    systemConfigStore.getSystemConfig()
    const { systemConfig } = storeToRefs(systemConfigStore)
    const onlineStatusText = ref('加载中...')
    // 假设userData已转为响应式数据
    const userData = ref(/* 你的userData初始值 */)

    watch(() => systemConfig.value.onlineStatus, (newVal) => {
      if (newVal.length > 0) {
        const index = userData.value.onlineStatus - 1
        onlineStatusText.value = newVal[index]?.onlineStatusText || '未知状态'
      }
    }, { immediate: true })

    return {
      onlineStatusText
    }
  },
  // 其余代码不变
}

内容的提问来源于stack exchange，提问作者netitgo