Nuxt JS, VueX - Как максимально минимизировать код

Question

Я хотел бы немного упростить мой код в VueX и компонентах. Как я могу это сделать? Я хотел бы использовать этот код довольно часто, поэтому мне нужно минимизировать его до максимального

компонента

            this.$store.commit(
              "notifications/changeText",
              "Pomyślnie zmieniono avatar !"
            );
            this.$store.commit("notifications/changeStyle", "success");
            this.$store.commit("notifications/changeStatus", true);
            setTimeout(() => {
              this.$store.commit("notifications/changeStatus", false);
            }, 5000);

store / notifications. js

export const state = () => ({
  activeStyle: "",
  active: false,
  text: ""
});

export const mutations = {
  changeText(state, text) {
    state.text = text;
  },
  changeStyle(state, style) {
    state.activeStyle = style;
  },
  changeStatus(state, status) {
    state.active = status;
  }
};

export const getters = {
  text(state) {
    return state.text;
  },
  style(state) {
    return state.activeStyle;
  },
  status(state) {
    return state.active;
  }
};

Answer 1

Лучше всего было бы обернуть этот код в функцию.

Но если бы это была нормальная функция, вам бы пришлось импортировать ее везде , вы бы хотели использовать этот код. Поэтому лучшее место для размещения этой функции - это то, где у вас есть доступ все время без каких-либо импортов.

Ответ - Vuex .

Но где? Действия. Почему actions? В верхней части Vuex docs мы видим различия между actions и mutations. И одно из этих отличий идеально подходит для нашего варианта использования:

Instead of mutating the state, actions commit mutations.

Так что давайте обернем этот кусок кода в функцию действий!

//store/notifications.js
export const actions: {
  our_lovely_action({ commit }) { //you can rename this function to fit your needs
    commit(
      "changeText",
      "Pomyślnie zmieniono avatar !"
    );
    commit("changeStyle", "success");
    commit("changeStatus", true);
    setTimeout(() => {
      commit("changeStatus", false);
    }, 5000);
  }
}

Как это вообще работает?

Каждый action function, который вы создаете в Vuex, автоматически получает один аргумент - context. Это context позволяет вам получить доступ к состоянию, мутациям и геттерам.

Так как вы называете это действие?

Super easy.

this.$store.dispatch("notifications/our_lovely_action");

Вот и все.

PS: Чтобы убедиться, что вы можете проверить полный код здесь:

//store/notifications.js
export const state = () => ({
  activeStyle: "",
  active: false,
  text: ""
});

export const mutations = {
  changeText(state, text) {
    state.text = text;
  },
  changeStyle(state, style) {
    state.activeStyle = style;
  },
  changeStatus(state, status) {
    state.active = status;
  }
};

export const getters = {
  text(state) {
    return state.text;
  },
  style(state) {
    return state.activeStyle;
  },
  status(state) {
    return state.active;
  }
};

export const actions {
  actions: {
    our_lovely_action({ commit }) { //you can rename this function to fit your needs
      commit(
        "changeText",
        "Pomyślnie zmieniono avatar !"
      );
      commit("changeStyle", "success");
      commit("changeStatus", true);
      setTimeout(() => {
        commit("changeStatus", false);
      }, 5000);
    }
  }
}