Vue.js中如何修改export const并获取异步加载后的全局用户数据

咱们先来拆解下问题根源：你定义的globalUser里，getActualUser是通过axios发起的异步请求——组件初始化data的时候，这个请求还没拿到后端返回的数据，所以直接赋值的usuarioActual只能拿到ActualUser的初始空对象。等请求完成后，globalUser.ActualUser确实会更新，但组件里的usuarioActual已经是一开始空对象的引用了，不会自动同步变化。

下面给你几个可行的解决办法，按需选择：

方法一：用watch监听全局数据变化 #

在组件里添加监听器，当globalUser.ActualUser更新时，自动同步到组件的usuarioActual：

export default {
  data() {
    return {
      usuarioActual: globalUser.ActualUser,
      anotherData: {}
    }
  },
  watch: {
    'globalUser.ActualUser': {
      immediate: true, // 确保组件初始化时也能触发一次
      handler(newUser) {
        // 用展开运算符做浅拷贝，避免直接引用导致的意外修改
        this.usuarioActual = {...newUser};
      }
    }
  }
}

这个方法的优势是不管请求什么时候完成，组件都能捕获到最新的用户数据。

方法二：让全局方法返回Promise，组件等待请求完成 #

先修改globalUser的getActualUser方法，让它返回Promise：

export const globalUser = new Vue({
  created: function(){ 
    this.getActualUser(); 
  },
  data: { 
    ActualUser: {name:'',meta:'',tipo:''} 
  },
  methods:{ 
    getActualUser: function(){ 
      const urlMeta = 'usuarioActual'; 
      // 返回axios的Promise，同时在then里更新全局数据
      return axios.get(urlMeta).then(response => { 
        this.ActualUser = response.data; 
        return response.data; // 把返回的数据传递出去
      }); 
    } 
  } 
});

然后在组件的created钩子中用async/await等待请求完成：

import {globalUser} from '../app.js'

export default {
  data() {
    return {
      usuarioActual: {name:'',meta:'',tipo:''},
      anotherData: {}
    }
  },
  async created() {
    // 等待全局请求完成，拿到最新用户数据
    const latestUser = await globalUser.getActualUser();
    this.usuarioActual = latestUser;
  }
}

这个方法能确保组件初始化时就拿到请求完成后的真实数据，适合必须在组件渲染前获取用户信息的场景。

方法三：直接利用Vue响应式，不用复制数据 #

其实你完全可以不用在组件data里复制一份usuarioActual，直接在模板或逻辑中引用globalUser.ActualUser——Vue的响应式系统会自动追踪它的变化，实时更新视图：

<template>
  <div class="user-info">
    <p>用户名：{{ globalUser.ActualUser.name }}</p>
    <p>用户类型：{{ globalUser.ActualUser.tipo }}</p>
  </div>
</template>

<script>
import {globalUser} from '../app.js'

export default {
  data() {
    return {
      anotherData: {}
    }
  },
  // 也可以封装成计算属性，让代码更清晰
  computed: {
    usuarioActual() {
      return globalUser.ActualUser;
    }
  }
}
</script>

这个方法最简单，不需要额外的同步逻辑，推荐在不需要修改组件内用户数据副本的场景下使用。

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