使用Vuex Action获取数据后设置首项为选中值的正确方案

你现有实现的问题根源有两点：

1. data 函数执行时机早于 created 钩子，此时异步请求还未发起，Store 中的角色列表是空数组，无法拿到第一个元素
2. data 内的属性初始化后不会自动跟随计算属性 roles 的更新而变化，因此异步请求完成后也不会自动更新默认值

以下是两种比watch更简洁的实现方案：

方案1：利用Action返回的Promise异步赋值 #

Vuex的dispatch调用异步Action时会返回Promise，你已经把fetchRoles声明为async函数，直接用await等待请求完成后再赋值即可：

<script>
export default {
  async created() {
    try {
      // 等待角色列表拉取完成，此时Store内的roles已更新
      await this.$store.dispatch('roles/fetchRoles')
      this.selectedRole = this.roles[0] ?? null
    } catch (error) {
      // 可在此处添加请求失败的提示逻辑
      console.error('角色列表拉取失败', error)
    }
  },
  computed: {
    roles() {
      return this.$store.getters['roles/roles']
    },
  },
  data() {
    return {
      selectedRole: null,
    };
  },
};
</script>

这种方案逻辑直观，完全贴合你的请求流程，不需要额外的监听逻辑，也兼容角色列表已经被其他页面拉取过的场景（你的fetchRoles里已有非空判断，就算没有新请求，Store里的旧数据也可以正常拿到）。

方案2：将选中值改为计算属性实现自动响应 #

如果你的selectedRole仅作为默认选中值，后续不需要单独做本地修改，可以直接把它也定义为计算属性，完全不用写生命周期逻辑：

<script>
export default {
  created() {
    this.$store.dispatch('roles/fetchRoles')
  },
  computed: {
    roles() {
      return this.$store.getters['roles/roles']
    },
    // 自动跟随roles的更新而变化，完全响应式
    selectedRole() {
      return this.roles[0] ?? null
    }
  },
  data() {
    return {}
  },
};
</script>

这种方案代码量最少，不需要处理异步回调，只要角色列表更新，默认选中值会自动同步。

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