VueJS/VueX : 상태 속성이 어레이일 때 워치가 호출되지 않음

VueJS/VueX : 상태 속성이 어레이일 때 워치가 호출되지 않음

다음과 같은 단순한 흐름이 있습니다.

• 백엔드 측에 여러 대의 차량을 저장하는 VueX 작업 호출
• 새로 만든 차를 저장하기 위해 돌연변이를 호출합니다.
• 차량 배열이 바뀔 때마다 호출해야 할 시계를 선언합니다.

문제는 워처가 컴포넌트에 호출되지 않는다는 것입니다.

VueX 모듈:

/*
 * State: properties to store
 */
const state = {
    siteCars: []
};

/*
 * Getters: Getters of properties defined in state
 */
const getters = {

    siteCars(state) {
        return state.siteCars;
    }

};

/*
 * Mutations (Setters): Setters of properties defined in state
 */
const mutations = {

    PUSH_CARS(state, data) {
        state.siteCars = _.merge(state.siteCars, data.cars);
    },

};

/*
 * Actions
 */
const actions = {

    /*
     * Action used to create multiple cars
     */
    massImportCars({ commit, rootState }, payload) {

        axiosBackend.post("/cars/massimport", payload,
            {
                headers: { Authorization: rootState.auth.authString }
            }
        ).then(res => {

            commit("PUSH_CARS", {
                cars: res.data.data
            });

        }).catch(error => {});

    },

};

export default {
    state,
    getters,
    mutations,
    actions
};

내 Vue 컴포넌트:

방금 VueX 모듈 내 getter에서 온 내 siteCars 자산에 watcher를 선언했습니다.문제는 새 차가 siteCars 상태로 푸시될 때 핸들러가 호출되지 않는다는 것입니다.

watch: {
   siteCars: {
      handler(val){
         console.log("NEVER CALLED !!");
      },
      deep: true
   }
},
computed: {
   ...mapGetters(["siteCars"]),
},

돌연변이를 다음과 같이 변경해 보십시오.

state.siteCars.push(data.cars);

따라서 이전 상태의 참조는 변경되지 않습니다.

2개의 어레이를 통합해야 하는 경우 ES6 분산 연산자를 사용한 솔루션

state.siteCars = [...state.siteCars, ...data.cars];

언급URL : https://stackoverflow.com/questions/55862932/vuejs-vuex-watch-never-called-when-state-property-is-an-array