Как я могу вернуть данные в виде нескольких объектов?

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

Вы добавляете весь массив как отдельный элемент state.jobs. Вместо этого вы можете использовать оператор распространения Javascript, чтобы вытолкнуть каждый элемент из массива:

state.jobs.push(...jobss)

Answer 2

Попробуйте использовать 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));