vue reject provide可以传异步数据吗？

Question

vue reject provide异步数据怎么传递

// 父组件
export default {
    data(){
        return{
            res:{}
        }    
    },
    provide() {
      return {
        formItem: this.res
      };
    },
    methods:{
        get().then((res)=>{
            this.res = res
        })
    }
}

// 子组件
export default {
    inject: ["formItem"],
    mounted(){
        console.log(this.formItem) // 这里接不到，请问可以解决吗
    }
}

Answer 1

provide-inject如果传递的是非引用类型的值，是不会响应式变化的，但是如果传递的是个引用类型的值，是会响应式变化的。
你接收不到的原因是，在子组件的mounted执行的时候，父组件中res还未得到值。

Answer 2

其实这个可以用异步 action 的思路去解决：

// 父组件
export default {
    data() {
        return {
            res: null
        }    
    },
    provide() {
      return {
        getRes: this.getRes
      };
    },
    methods:{
        async getRes() {
            if (!this.res) this.res = await get()
            return this.res
        }
    }
}

// 子组件
export default {
    inject: ["getRes"],
    async mounted() {
        console.log(await this.getRes())
    }
}

Answer 3

1. Vue2里用provide 去传递一个响应式的对象

   父元素

   {
   provide () {
    return {
      test: this.objData
    };
   },
   data () {
     objData: { 
        message: 'hello'
     }
   },
   mounted() {  
    // 随机变换值
        setInterval(() => { this.$set(this.objData.message = Math.random())} , 3000) }
   }

   子元素

   inject: ['test']