Нормальная ли это практика использования Vuex?

Question

[Abdul Amenov]

Можно ли так использовать Vuex?

export const actions = {
  async signIn(ctx, credentials) {
    await this.$auth.loginWith("local", {
      data: credentials
    });
  },
  async signUp(ctx, user) {
    return await this.$axios.$post("auth/sign-up", user);
  }
};


      this.$store.dispatch("signUp", this.user).then(res => {
        if (res.errors) {
          this.errors = res.errors;
        } else {
          this.$store.dispatch("signIn", {
            email: this.user.email,
            password: this.user.password
          });
        }
        this.loading = false;
      });

Comments

[Abdul Amenov]

Это работает. Спрашиваю потому что пока не могу понять зачем нужен Vuex.

[WStanley]

Абдулсалам Аменов, Vuex нужен чтоб данные централизовано хранить и передавать между компонентами. По крайней мере я так использую. почитать

[Abdul Amenov]

WStanley, в моем примере норм? или лишние телодвижения?

[WStanley]

Абдулсалам Аменов, Думаю что авторизацию и регистрацию можно было оставить в компоненте, зачем ее централизовано хранить?
Но я backend и опыта в таком у меня мало. Лучше камрадов спросить.

[Ярослав Иванов]

Ты на фронте хранишь пароль?

[Abdul Amenov]

Ярослав Иванов, это форма ввода пароля.

Answer 1

[nvdfxx]

Данные авторизации нужны для роутинга, как минимум, плюс при каждом обращении к серверу вы же токен должны отсылать, который тоже в vuex прекрасно себя чувствует

this.loading нужно не в компоненте делать, а в экшоне, вы же не знаете, как долго запрос на сервер будет обрабатываться, сейчас у вас диспатч и this.loading = false одновременно срабатывают, можно, конечно, и в компоненте, но тогда код усложнится, как по мне

Comments

[Abdul Amenov]

Такая практика норм, подскажите пожалуйста?

export const state = () => ({
  regionsAndCities: [],
  typesBussines: [],
  units: [],
  categories: []
});

export const mutations = {
  setRegionsAndCities(state, regionsAndCities) {
    state.regionsAndCities = regionsAndCities;
  },
  setTypesBussines(state, typesBussines) {
    state.typesBussines = typesBussines;
  },
  setUnits(state, units) {
    state.units = units;
  },
  setCategories(state, categories) {
    state.categories = categories;
  }
};

export const actions = {
  async fetchRegionsAndCities({ commit }) {
    const data = await this.$axios.$get("api/dashboard/config/groups/1");

    commit("setRegionsAndCities", data);
  },
  async fetchTypesBussines({ commit }) {
    const data = await this.$axios.$get("api/dashboard/config/groups/2");

    commit("setTypesBussines", data);
  },
  async fetchUnits({ commit }) {
    const data = await this.$axios.$get("api/dashboard/config/groups/3");

    commit("setUnits", data);
  },
  async fetchCategories({ commit }) {
    const data = await this.$axios.$get("api/dashboard/config/groups/4");

    commit("setCategories", data);
  }
};

export const getters = {};

[nvdfxx]

Абдулсалам Аменов, вы ошибки никак не обрабатываете, которые с сервера приходят, любой ответ в стор записывается, если, например, в каком-нибудь компоненте рендерится список, на основе данных из стора, а в него запишется ошибка, у вас приложение не будет работать, интерцепторы в аксиосе подрубите хотя бы