Какой оптимальный способ передачи и редактирования данных в Vue приложении?

Question

[Артур Карапетян]

Здравствуйте.
Сейчас разрабатываю приложение на vue, которое работает с несколькими сущностями на одной странице. Например, есть страница заказ, при ее открытии с бэка подтягивается по 3м разным запросам информация о заказе, информация о доставке и информация о списке товаров. Запросы отправляются и приходят независимо друг от друга. Для каждого запроса есть своя булевая переменная, которая показывается состояние запроса(isLoading, который на данный момент хранится локально в родительском компоненте, а не в сторе). Методы для дергания этих запросов хранятся в 3х разных модулях Vuex, там же хранятся приходящие данные.

Теперь основная проблема. На странице заказа есть несколько опять таки независимых компонентов, в каждом из которых могут использоваться или изменяться данные из ответа любого из 3х основных запросов (заказ, доставка, товары). Таких компонентов много и они могут быть вложены друг в друга на несколько уровней. Соответственно нужно каким-то оптимальным образом передавать внутрь этих компонентов данные, а также сохранять их изменения. Я вижу 3 варианта:

1. прокидывать все пропсами, и допускать мутации в полях объекта - плохо, но будет работать + очень просто в реализации, но тк вложенность компонентов может быть большая, то выглядеть будет это не слишком красиво
   
2. прокидывать пропсами + изменять через emit - хорошо, но много кода с постоянными слушателями и тд
   
3. отказаться от пропсов и сделать все через vuex, в компонентах, где данные будут меняться, обозначать computed с set и get методами, которые будут вызывать мутации в сторе и выводить данные из стора - звучит хорошо, но опять таки достаточно громоздко будет выглядеть.
   

Из всего вышесказанного появляется вопрос, какой способ для обмена данными выбрать и какие способы, которые имеют место быть, я не описал

Answer 1

[Andrey Vasilev]

Всё зависит от ситуации. Иногда пропсом прокинуть куда проще, чем писать кучу кода и тянуть данные их хранилища.

Все три мысли вполне адекватные, но очевидно что третий вариант вписывается куда лучше.

Во-первых: ты видишь откуда летят данные, а не бегаешь по компонентам и не ищешь откуда растут ноги.

Во-вторых: если тебе нужно подтянуть десяток данных - ты с ума сойдешь кидаться ими как каллом из компонента в компонент, а вот через хранилище ты можешь не вытягивать всё и сразу, а взять необходимый экшн, гетр, мут и обозвать его.

Comments

[Roman K]

Очевидно? Мне вот не очевидно. Vuex — это неструктурированная помойка. Более того, как только компонент начинает использовать глобальный стор, он перестаёт быть "глупым" и переиспользуемым.

[Andrey Vasilev]

Roman Kitaev, неструктурированной помойкой vuex можешь сделать ты сам. у меня по модулям всё отдельно раскидано. я вижу что и откуда подключаю, зачем подключаю и где использую. весь список ВСЕГО вообще вынесен в отдельный файл types.js, где записано внешнее обращение и внутреннее.

[SimBioT19]

Andrey Vasilev, можете набросать пример types.js?

[Andrey Vasilev]

SimBioT19,
types.js

export default {
 // ACTIONS
 FETCH_VACANSIES: "FETCH_VACANSIES",
 // MUTATION
 SET_VACANCIES: "SET_VACANCIES",
 // GETTERS
 VACANCY_ITEMS: "VACANCY_ITEMS",
}

Соответственно всё разбито по файлам: mutations, getters, actions. Соединяем всё это дело в index.js

import actions from "./actions"
import getters from "./getters"
import mutations from "./mutations"

const namespaced = true

export default {
	namespaced,
	state() {
		return {
			vacancy: []
		}
	},
	actions,
	getters,
	mutations,
}

В данном случае тот же геттер выглядит вот так:

import types from "./types"

const getVacancyItems = (state) => {
	return state.vacancy
}

export default {
	[types.VACANCY_ITEMS]: getVacancyItems
}

и дальше можно использовать всё это дело в компоненте

[Артур Карапетян]

Andrey Vasilev, на первый взгляд при таком подходе будет больно использовать геттеры/мутации при вложенности модулей

[Andrey Vasilev]

Артур Карапетян, а к чему нужны вложенности модулей?
Если мне нужно сделать axios-запрос, мутировать/получить данные я создам модуль чисто под это дело. для других целей - будут другие модули. В компоненте тоже очень удобно работать с этим делом.