vue-chartjs 및 Pinia를 사용하여 저장된 반응형 데이터

Question

저는 Pinia를 사용하여 vue-chartjs로 데이터를 저장하여 반응형 차트를 만드는 데 능숙하지 않습니다. 이 예를 가이드로 사용하고 있지만 차트가 스토어의 변경 사항에 반응하도록 만드는 데 어려움을 겪고 있습니다.

반응형 양식을 사용하여 다른 구성 요소에서 Pinia 매장 데이터를 변경했는데 매장 데이터가 변경되는 것을 볼 수 있었지만 차트가 업데이트되지 않았습니다.

다음 구성요소를 사용하여 차트를 렌더링하고 있습니다.

<스크립트 설정>
'pinia'에서 { storeToRefs } 가져오기
'@/store/pinia-store-file'에서 { useStore}를 가져옵니다.
수입 {
    ChartJS로 차트,
    카테고리규모,
    선형규모,
    포인트요소,
    라인요소,
    제목,
    툴팁,
    전설
} 'chart.js'에서;
'vue-chartjs'에서 { 라인 } 가져오기;

ChartJS.등록(
    카테고리규모,
    선형규모,
    포인트요소,
    라인요소,
    제목,
    툴팁,
    전설
);

const store = useStore();

const storeData= storeToRefs(store);
const labels = [...Array(storeData.arr.value.length).keys()];

const 데이터 = {
  라벨: 라벨,
  데이터세트: [
    {
      라벨: '데이터 원',
      배경색상: '#f87979',
      데이터: storeData.arr.value
    }
  ]
}

const 옵션 = {
  반응형: 사실,
  유지AspectRatio: 거짓
}



</스크립트>

<템플릿>

  <라인 :data="data" :options="옵션" />

</템플릿>

ref()에서 store 변수를 래핑하려고 했는데 차트를 다시 렌더링해야 할 것 같습니다. 위의 예시를 피니아 매장 상태에 적용하고, 매장이 변경되면 업데이트하는 작업을 하고 있습니다.

Answer 1

응답에 데이터를 설정하지 않았습니다. 계산

을 사용해 보세요.

이 코드는 문제를 해결할 수 있습니다:

으아악