Vue3：如何将对象从提供传递到索引

【问题标题】：Vue3: how to pass an object from provide to indexVue3：如何将对象从提供传递到索引
【发布时间】：2021-08-15 10:54:35
【问题描述】：

我已经使用 vue.js 几个星期了，我想了解如何将来自服务器的对象全局注入子组件。

当我尝试使用 inject:['user'] 将对象注入子组件时，它返回一个空对象。

 data() {

    return {

    
        user: []
    }
},
 methods: {


    getLoggedUserData() {

        axios.get('/api/get-user/' + window.auth.id
        ).then(response => {

          this.user = response.data.user;


        });

    }
},
provide: {

 return {

user: this.user
}
},
created() {

    this.getLoggedUserData();

}

【问题讨论】：

标签： vue.js vuejs3

【解决方案1】：

provide 选项在这种情况下应该是一个函数来访问this.user 属性：

export default {
  provide() {
    return {
      user: this.user
    }
  }
}

为了让后代观察到所提供的user 的任何更改，父代必须仅通过子属性分配（例如this.user.foo = true）或Object.assign()（例如Object.assign(this.user, newUserObject)）来更新user：

export default {
  methods: {
    async getLoggedUserData() {
      const { data: user } = await axios.get('https://jsonplaceholder.typicode.com/users/1')

      // ❌ Don't do direct assignment, which would overwrite the provided `user` reference that descendants currently have a hold of:
      //this.user = user

      Object.assign(this.user, user) ✅
    }
  }
}

demo

【讨论】：