VueJS / VueX: Watch никогда не вызывается, когда свойство состояния является массивом

Question

У меня есть простой поток, который состоит из:

• Вызов действия 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:

Я только что объявил наблюдателя на свойстве siteCars, который поступает из геттера внутри модуля VueX.Проблема заключается в том, что обработчик никогда не вызывается, когда новые автомобили помещаются в состояние siteCars.

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

Answer 1

Попробуйте изменить свою мутацию как

state.siteCars.push(data.cars);

, поэтому он не меняет ссылку на ваше предыдущее состояние

Answer 2

, если вам нужно объединить 2 массива, решение с ES6 оператором распространения

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