如何使 Vue 2 提供/注入 API 响应式？

Question

我按如下方式设置代码，并且能够从 SomeComponent.vue 中的 setter 更新 App.vue 中的

checkout_info

，但 SomeComponent.vue 中的 getter 不是响应式的。

// App.vue
export default {
    provide() {
        return {
            checkout_info: this.checkout_info,
            updateCheckoutInfo: this.updateCheckoutInfo
        }
    },
    data() {
        return {
            checkout_info: {},
        }
    },
    methods: {
        updateCheckoutInfo(key, value) {
            this.checkout_info[key] = value
        }
    }
}

// SomeComponent.vue
export default {
    inject: ['checkout_info', 'updateCheckoutInfo']
    computed: {
        deliveryAddress: {
            get() { return this.checkout_info.delivery_address }, // <---- Not reactive??
            set(value) { return this.updateCheckoutInfo('delivery_address', value) }
        }
    }
}

Answer 1

经过几个小时的搜索，我

找到了答案。您必须使用 Object.defineProperty

 才能使其具有反应性。我不确定这是否是最好的方法，但这是一个有效的示例。

export default {
    data() {
        return {
            checkout_info: {},
        }
    },
    provide() {
        const appData = {}

        Object.defineProperty(appData, "checkout_info", {
            enumerable: true,
            get: () => this.checkout_info,
        })

        return {
            updateCheckoutInfo: this.updateCheckoutInfo,
            appData,
        }
    }
}

您稍后可以通过

this.appData.checkout_info

访问它

Answer 2

此注释来自官方文档。

注意：提供和注入绑定不是反应性的。这是 故意的。但是，如果您传递观察到的对象，属性 在那个物体上确实保持反应。

我想这就是你问题的答案。

来源：

https://v2.vuejs.org/v2/api/#provide-inject

Answer 3

我会将这些值放入一个对象中：

var Provider = {
  provide() {
    return {
       my_data: this.my_data
     };
  },
  data(){
    const my_data = {
      foo: '1',
      fuu: '2'
    };
    return {
      my_data;
    }
  }
}

var Child = {
  inject: ['my_data'],
  data(){
   console.log(my_data.foo);
   return {};
  },
}

什么时候对象属性是反应性的。我不知道这是否是正确的解决方案，但它适用于我的情况。

Answer 4

如果您使用的是内置 Composition API 的 Vue.js 2.7 或更高版本，您可以导入并使用“计算”来使提供的数据具有反应性：

父组件：

import { computed } from 'vue'

export default {
  provide() {
    return {
      foo: computed(() => this.bar)
    }
  },
  data() {
    return {
      bar: 'Hello World'
    }
  }
}

子组件：

export default {
  inject: ['foo']
}