Vue 2 제공 / 주입 API를 반응적으로 만드는 방법

Vue 2 제공 / 주입 API를 반응적으로 만드는 방법

나는 다음과 같이 코드를 설정했고, 업데이트 할 수 있었다.checkout_infoSomeComponent의 setter에서 App.vue로.하지만 SomeComponent의 getter.vue는 반응하지 않는다.

// 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) }
        }
    }
}

나는 여러 시간 동안 찾아본 끝에 답을 찾았다.당신은 사용해야만 한다.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

이 메모는 공식 문서에 수록되어 있다.

참고: 공급 및 주입 바인딩은 반응적이지 않음.이것은 의도적인 것이다.그러나 관찰된 개체를 전달하면 해당 개체의 속성은 반응성이 유지된다.

나는 이것이 너의 질문에 대한 대답이라고 생각한다.

출처: https://vuejs.org/v2/api/#message-messages

참조URL: https://stackoverflow.com/questions/65718651/how-do-i-make-vue-2-provide-inject-api-reactive