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 传播算子

if ($result->num_rows >0) {
    $row = $result->fetch_assoc();
} else {
   $row = [ 'error' => 'No data found' ];
}

echo json_encode($row);

VueJS / VueX：当state属性为数组时，永远不会调用手表

2 个答案: