thanks!

Хотел спросить более опытных коллег)

Чем Вы руководствуетесь (сложность логики, наличие большое количество под-компонентов, необходимость пробрасывать данные на 2-3 компонента выше/ниже или "так просто удобнее"), когда принимаете решение выноса стейта какого-либо компонента в модуль Vuex ?


В моей голове след. картина:

Плюсы:
- Все мутации и экшены становятся прозрачными благодаря записям в vue-devtools
- удобно получать доступ ко всем данным этого компонента из его под-компонентов (не нужно делать кучу эмитов и пробросов пропсов)

Минусы:
- данный стейт будет висеть в проекте всегда. То есть независимо показывается компонент или нет.


По сути, если бы не этот минус (в серьезности которого, я также немного не уверен), можно было бы практически всем компонентам, где происходит какое-либо дробление на подкомпоненты, и есть некоторая относительно сложная логика хранить стейт как модуль vuex'а.

Минус: невозможность привязать данные из стейта к v-model без костылей, минус: простота доступа к чужому состояниюб минус: скрытые зависимости между компонентами

Компьютед поле с геттером и сеттером считает костылем для привязки v-model ?

Например, инпут изменения телефона, данные которого хранятся в модуле vuex:

    phone: {
      get() {
        return this.$store.state.regForm.phone;
      },
      set(value) {
        this.$store.commit('regForm/' + setPhone, value);
      },
    },

    phone: {
      get() {
        return this.$store.state.regForm.phone;
      },
      set(value) {
        this.$store.commit('regForm/' + setPhone, value);
      },
    },

Я понимаю как это работает, я три часа назад как раз лекцию про вьюкс читал :)

    phone: {
      get() {
        return this.$store.state.regForm.phone;
      },
      set(value) {
        this.$store.commit('regForm/' + setPhone, value);
      },
    },

Да, потому что к примеру вы не сможете сделать такое для сущности в массиве :) когда у вас v-for + v-model

Я прекрасно понимаю простоту "давайте сложим все в одну глобальную переменную" (чем по сути вьюкс и является) и не будем думать о потоках данных вообще

Только именно потоки данных и описывают "логику приложения"

Да, есть другой подход "компонент четко описывает чего ему надо от глобального хранилища" но у вьюкса проблемы с "четко"

(как и вообще с типизацией)

Я согласен.

Однако ведь также не круто, когда приходится делать огромное количество эмиттов и прокидываний пропсов..

В таких вопросах все решается индивидуально, смотря на кейс ? Или же все-таки существуют какие-либо сформулировавшиеся подходы, стратегии, best-practiсes по тому, как "правильно" реализовывать поток данных в компонентах ?

Вью и "best practice" редко встречаются в одном предложении

Все зависит от задач

Понял, спасибо большое за отклик и подробные комментарии)

Из доки копирую и не работает css у меня...

sass работает css нет!

парни я правильно отправляю put запрос?

await API.put(`/api/v1/employees/${id}`, this.state.employeeUpdate, {
        headers: { "Content-Type": "application/json" },
      });

await API.put(`/api/v1/employees/${id}`, this.state.employeeUpdate, {
        headers: { "Content-Type": "application/json" },
      });

Почти

)