Vuejs/Nuxtjs의 Watch는 Vuex Store의 객체 배열 변경 사항을 모니터링할 수 없습니다.

Question

저는 Vuejs/Nuxtjs 在此应用程序中开发一个应用程序，我有一个组件 IdentifiersNode.vue ，我想在其中监视 Vuex 存储数组 identifiersArray를 사용하고 있습니다.

어떤 이유로든 identifiersArray 的直接更改，例如 push、直接键值更改，但是当我向 identifiersArray 中的对象添加新对象时，watch 작동하지 않는 것을 볼 수 있습니다.

내 IdentifiersNode.vue中的watch 기능은 다음과 같습니다.

으아악

다음 내용은 Vuex 存储中我的 identifiersArray 发生的更改 endcphpcn 存在于 identifiersInfoStore .js에 있습니다.

으아악

보시다시피 identifiersArray 中的现有对象添加一个对象，但是当我这样做时，我希望我的 watch 函数在 IdentifiersNode.vue 中触发，因为我有 deep: true 작업 중인데 어떤 이유에서인지 전혀 작동하지 않습니다.

Vuex store 和 Vue watch를 사용하여 어레이의 1분 변화도 감지할 수 있는지 알려주실 수 있나요? 그렇지 않다면 어떤 대안을 취할 수 있습니까?

다음은 console.log의 내용입니다 identifiersNode:

으아악

다음은 console.log의 내용입니다 state.identifiersArray:

watch: {
    '$store.state.modules.identifiersInfoStore.identifiersArray': {
        handler (val) {
            console.log('WATCH : ' + JSON.stringify(val, null, 4))
        },
        deep: true
    }
},

Answer 1

vuex를 사용하는 경우 mapGetters를 사용하여 매장에서 상품을 가져오는 것이 좋습니다. 그러면 항목이 변경될 때마다 자동으로 값을 모니터링하고 다시 렌더링합니다.

문서는 다음과 같습니다. Documentation

작은 예

쇼핑

으아악

구성요소

으아악

다음은 코드펜의 예입니다: https://codesandbox.io/s/vuex-store-forked-bl9rk0?file=/src/comComponents/HelloWorld.vue

객체 속성을 변경하려는 경우(또는 객체 속성인 배열에 새 객체를 추가하는 경우) 가장 좋은 방법은 현재 객체를 완전히 다시 푸시하는 것입니다.

예를 들어 [{id: 1,values:[1,2,3]},{id:2,values:[4,5,6]}]와 같은 배열이 있는 경우 js 접합 방법을 사용하여 값을 업데이트할 수 있습니다.

으아악

Answer 2

답변을 제공해 주시면 향후 다른 사람들에게 도움이 될 수 있습니다.

실제로 Vuex Store의 배열에 있는 기존 객체에 객체를 추가하고 있습니다. 따라서 시계는 변화를 인식할 수 없습니다. 나는 그것을 vue.set로 바꾸었고 이것은 나에게 효과적이었습니다.

이전에는 기존 개체에 추가를 사용했습니다.

으아악

나중에 다음과 같이 변경했습니다:

으아악

아래는 Vue 구성 요소의 시계입니다. 이 코드는 내 mounted에서 사용되었으며 시계에서도 사용할 수 있습니다.

으아악