Question

我在状态内设置了一个空数组

const state = {
    jobs: []
}

在组件内部，我调度了一个动作，代码如下：

created(){
    this.$store.dispatch('viewJobs');
}

viewJobs操作如下所示：

viewJobs: ({commit}) => {

    axios.get('/api/jobs')
        .then(res => {
            const jobss = res.data;

            console.log(jobss);

            commit('LIST_JOBS', jobss);

        })
        .catch(error => console.log(error));   
}

然后突变如下所示：

'LIST_JOBS'(state, jobss){
    state.jobs.push(jobss);
}

从laravel方面看，我的控制器如下所示：

    $jobs = Employment::all();

    return $jobs->toJson(JSON_PRETTY_PRINT);

当我加载页面时，可以控制台日志作业，但是状态不会更新。

如何成功将数据推送到状态？

Answer 1

尝试使用response()->json()

return response()->json(Employment::all(),200);

并尝试在提交部分使用{jobss:jobss}

viewJobs: ({commit}) => {

    axios.get('/api/jobs')
        .then(res => {
            const jobss = res.data;

            console.log(jobss);

            commit('LIST_JOBS', {jobss:jobss});

        })
        .catch(error => console.log(error));   
}

另一种方式，您的vuex商店看起来像这样

// state
export const state = () => ({
    items: []
})

// getters
export const getters = {
    items: state => state.items
}

// mutations
export const mutations = {
    SET_ITEMS (state, { items }) {
        state.items = items
    },
    PUSH_ITEM (state, { item }) {
        state.items.push(item)
    },
    UPDATE_ITEM (state, { index, item }) {
        state.items[index] = item
    },
    DELETE_ITEM: (state, index) => {
        state.items.splice(index.index, 1);
    }
}

// actions
export const actions = {
    setItems ({ commit }, { items }) {
        commit('SET_ITEMS', { items })
    },
    pushItem ({ commit,state }, { item }) {
        commit('PUSH_ITEM', { item })
    },
    deleteItem ({ commit,state }, { index }) {
        commit('DELETE_ITEM', { index })
    },

    updateItem ({ commit,state }, { index,item }) {
        commit('UPDATE_ITEM', { index,item })
    },
}

然后在组件中调用操作

 this.$axios.$get('/api/jobs')
        .then(res => {
            const jobss = res.data;

            console.log(jobss);

            this.$store.dispatch('your_store_name/setItems', {items:jobss});

        })
        .catch(error => console.log(error));

Answer 2

您正在将整个数组添加为state.jobs的单个元素。相反，您可以使用Javascript传播运算符来推送数组中的每个元素：

state.jobs.push(...jobss)

如何将数据作为多个对象返回？

2 个答案: