VueJs, Vuex как передать ответ от сервера в состояние?

Question

[Kitaro2]

Доброго дня суток, не давно начал изучать vuejs и захотел попробовать vuex, и столкнулся с проблемой передачи ответа от сервера в состояние, в интернете нашел несколько англоязычных тем, но разобрать что к чему не смог...
Проблема: нужно передать новый item в компонент, но добавляется пустая строка из state без каких либо данных, при перезагрузке страницы данные отображаются.
Компонент:

methods: {
      submit(){this.$store.dispatch('prod/newitem', this.$data.form);}
    }
Action:
export const newitem= (context, payload) => {
  axios.post('/api/product/add', payload)
  .then((response) => {
  context.commit('additem', response.data);
})}
Mutation:
export const additem= (state, payload) => state.items.push(payload);

Если указать context.commit('additem', response.data.add); и больше ничего не менять в коде выше, то компонент не обновится и выдаст ошибку

Cannot read property 'id' of undefined, console.log(payload);

выдает undefined, как я понимаю в данном случае вообще ничего не приходит в состояние.
Тоже самое будет, если передать

context.commit('additem', {item: response.data}); 
export const additem= (state, {item}) => state.items.push(item);

В каком направлении копать?) (использую laravel)

[{"name":"test","num":"12412","desc":"test", "updated_at":"2018-11-29 09:44:54","created_at":"2018-11-29 09:44:54","id":58}]

ответ

Comments

[shmatuan]

А в ответе с сервера вообще что-то приходит?

[Kitaro2]

Упс, забыл:
[{"name":"test","num":"12412","desc":"test", "updated_at":"2018-11-29 09:44:54","created_at":"2018-11-29 09:44:54","id":58}]

[shmatuan]

Kitaro2, возможно попробовать state.items.push(payload[0]); т.к. приходит в виде массива. Потом переделать с .concat если получится)

[Kitaro2]

shmatuan, эххх.... насколько очевидное и правильное решение, аж стыдно :) state.items.push(payload[0]); помогло, спасибо :) .concat попробую

Answer 1

[Kitaro2]

Помог пользователь shmatuan

Kitaro2, возможно попробовать state.items.push(payload[0]); т.к. приходит в виде массива. Потом переделать с .concat если получится)

Спасибо всем.

Comments

[Александр]

Ну так пусть shmatuan сам напишет ответ и вы отметите его как лучший, чтобы по-честному засчитать ему лучший ответ

[shmatuan]

Александр, Всё ок, я не против - это больше частный ба, так что другим он будет не очень полезным) Главное ТС решил проблему)

Answer 2

[nvdfxx]

commit в экшенах передавать лучше через {commit}, а не context, и юзать

export const newitem= ({commit}, payload) => {
    axios.post('/api/product/add', payload)
        .then((response) => {
            commit('additem', response.data);
        })
}

Возможно поможет, и еще, возможно вы не заметили, хотя вряд ли: одна кавычка 'prod/newitem

methods: {                                  
    submit(){this.$store.dispatch('prod/newitem, this.$data.form);}
}

Comments

[Kitaro2]

state.items.push(payload[0]); мне подсказали в комментариях - помогло, почитаю про {commit} и более подробно про context спасибо, кавычку я упустил в вопросе, что бы меньше было лишней информации, немного передалал исходный код :)

Answer 3

[rob3n]

По сути вам приходит массив и он может быть больше длиной чем один объект, вы все правильно делаете когда сохраняете в Стейт такой ответ от сервера, просто рендерить нужно массив а вы скорее сейчас в шаблоне обращаетесь к объекту без v-for