Как правильно получать данные через REST API?

Question

[Денис Лабутин]

Есть список элементов:

[ {id: 12, name: "12"}, {id: 43, name: "43"}]

Весь список я в действии получаю через axios и вызываю мутацию, которая устанавливает состояние lists:

const actions = {
    getList({commit}){
        let list = api.getList();
        commit('setList', list);
    }
}

const mutations = {
    setList(state, list){
        state.list = list;
    }
}

И после в компоненте я вызываю:

created () {
    	this.$store.dispatch('getList');
},
computed: {
		list(){
			return this.$store.state.list;
		}
	},

Так у меня сохранился в состояние список элементов, и я могу менять их и изменять.

Теперь у меня есть другой компонент - просмотр item'a из list.
По-хорошему нужно делать дополнительный запрос getItem(id).
Я во vuex'e в геттере указал запрос getItem(id), чтобы не перебирать массив на клиенте:

const getters = {
 	getItemById: state => id => {
    	return api.getItem(id);
  	}
 }

1.Правильный ли подход?
2.Сохранилось ли состояние, если я буду изменять item? При изменение item'a состояние list не изменится как я понимаю, то есть в action'e придется изменять тоже состояние? Или просто при изменение сделать запрос на обновление списка list?

Comments

[Klein Maximus]

api.getList() и api.getItem(id) - это обертка для ajax-запроса через axios?

[Денис Лабутин]

Klein Maximus, Да

[Klein Maximus]

Денис Лабутин, тогда непонятно, почему Вы асинхронные операции делаете в геттерах

[Денис Лабутин]

Klein Maximus, Я вот и спрашиваю как сделать правильно)

Answer 1

[Александр Шелеметьев]

1. В таком подходе не вижу ничего некорректного.
2. Менять item лучше через мутацию/action. Используйте Vue.set, иначе Vue не отследит измение родительского list.