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

Question

我按如下方式设置代码，并且能够checkout_info从 SomeComponent.vue 中的 setter 更新 App.vue，但 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