Vuex4 스토어를 감시하는 Vue3가 콜백 기능을 실행하지 않음

Vuex4 스토어를 감시하는 Vue3가 콜백 기능을 실행하지 않음

방금 Vue 3을 시작했는데, Vuex로 구축된 스토어의 상태 변화를 관찰하려고 합니다.

어떤 이유에서인지 그것은 의도한 대로 작동하지 않는다.

<script lang="ts">
    import { onMounted, computed, watch } from 'vue';
    import { useStore } from 'vuex';

    import LineDrawer from '../helper/LineDrawer';

    export default {
      setup() {
        const store = useStore();
        const lines = computed(() => store.state.lines.length);

         onMounted(() => {
           new LineDrawer();

           setTimeout(() => store.commit('push'), 1000);
          });

          watch(() => lines, () => {
           console.log('lines changed');
          });

          return {
            lines,
          };
     },
    };
</script>

그watch함수는ref의론으로서computed리액티브를 반환하다ref.

JSFiddle 예시

// ...

        watch(lines, () => console.log('lines changed'));

// ...

어레이를 감시하고 있기 때문에, 추가해 주세요.{deep:tree}옵션:

  watch(() => lines, () => {
       console.log('lines changed');
      },{
        deep:true
     });

언급URL : https://stackoverflow.com/questions/64661931/vue3-watching-vuex4-store-doesnt-run-callback-function