如何创建反应式提供/注入

Question

注意版本：

vuejs2

composition api

如下面发布的代码所示，在父组件中，我

provide

反应变量

status

的值。在

mounted

生命周期回调中，我每隔特定时间更改

status

的值。 在子组件中，i

inject

status

的值，如下面的代码所示。

在运行时，我期望日志语句出现

watch:{
    injStatus(newVal, oldVal) {
      console.log({msg:' watched injStatus. oldVal:' + oldVal + ', and newVal: ', newVal});
    },
  },

显示

status

变量的不同值，但这不会发生。

请让我知道如何使

provid/inject

反应

尝试网址：

请点击这里

家长

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld></HelloWorld>
</template>
<script>
import {computed} from 'vue'
import {InjectionKeys} from './assets/InjectionKeys.js'
import {HelloWorld} from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  data() {
        return {
          status:undefined
        };
      },
    provide() {
        return {
            [InjectionKeys.PROVIDE_KEY_STATUS.description]: computed(() => this.compPropsStatus),
        };
    },
    computed:{
      compPropsStatus() {
        return this.status
      },
    },
    mounted() {
      setTimeout(() => {
          this.status = '1'
        }, 1000);
      
        setTimeout(() => {
          this.status = '2'
        }, 3000);
      
        setTimeout(() => {
          this.status = '3'
        }, 5000);

        setTimeout(() => {
          this.status = '4'
        }, 7000);
    }
}
</script>

孩子：

<script>
import {InjectionKeys} from '../assets/InjectionKeys.js'

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  inject: {
        injStatus: { from: InjectionKeys.PROVIDE_KEY_STATUS.description },
    },
  watch:{
    injStatus(newVal, oldVal) {
      console.log({msg:' watched injStatus. oldVal:' + oldVal + ', and newVal: ', newVal});
    },
  },
    
}
</script>

Answer 1

Options 和 Composition API 结合在一起，这可能会导致结果不确定。 A 只是具有

value

属性的响应式对象，可以手动创建，然后通过引用传递：

data: () => ({
  status: { value: null }
}),
provide() {
    return {
        PROVIDE_KEY_STATUS: this.status
    };
},
mounted() {
    this.status.value = 1;
    ...

对于孩子来说：

inject: {
    injStatus: { from: 'PROVIDE_KEY_STATUS' },
},
watch: { ['injStatus.value'](newVal, oldVal) {...}, ...

使用组合 API，可以用可组合项包装：

const useProvideStatus = statusRef => provide('PROVIDE_KEY_STATUS', statusRef);

const useStatus = () => inject('PROVIDE_KEY_STATUS');