Vue 3: 컴포넌트가 반응하지 않는 이유는 무엇입니까?

Vue 3: 컴포넌트가 반응하지 않는 이유는 무엇입니까?

나는 하나의 컴포지터블을 다른 컴포지터블에서 사용하고 싶다.첫 번째 컴포넌트는 기본적으로 Vuex의 초경량 버전입니다.

import {
  reactive,
  readonly,
} from 'vue';

const state = reactive({
  settings: {
    loading: true,
  },
  cart: {
    loading: true,
    items: [],
  },
});

export default {
  state: readonly(state),
};

이걸 다른 컴포넌트에 사용하려고 하면cart반응하지 않고 있습니다.

다른 컴포넌트에는 다음과 같은 내용이 있습니다.

import store from '@/store';
watch(store.state.cart, () => {
  console.log('test');
});

아무것도 반응하지 않는 것 같아요전화를 걸려고 하면.value마치 프록시가 아닌 것처럼 정의되지 않았습니다.

저도 한번 써봤어요.inject('store')그것도 마찬가지인 것 같아요

카트의 어떤 부분이 바뀌는지 보고 싶어요.

답은 길고 복잡하지만 기본적으로 다음과 같습니다.

1. 일부는 javascript의 문제이며, 제가 업데이트한 방식입니다.cart오브젝트의 키 전체를 API 호출로 대체했기 때문에 내부 카트 키가 다른 참조로 갱신되었습니다.여기서 문제를 시각화할 수 있습니다.

2. 나는 사용해야만toRef미묘하게 다르다ref특히 반응형 객체에서 반응형 키를 추출하기 위한 것입니다.나는 이것이 파괴에만 적용되는 줄 알았지만 그것은 또한 간단히 말하는 것에도 적용된다.const cart = store.state.cart카트를 갱신했을 때처럼cart변수는 이전 참조를 가리킵니다. toRef는, 이 문제를 다음의 방법으로 해결합니다.const cart = toRef(store.state, 'cart')

언급URL : https://stackoverflow.com/questions/68869080/vue-3-why-is-my-composable-not-reactive