NuxtJS，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);

存储/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);
  }
}

这是如何工作的？

您在 Vuex 中创建的每个 action function 都会自动传递一个参数 - context。这个context 让您可以访问状态、突变和吸气剂。

那么你怎么称呼这个动作呢？

超级简单。

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

就是这样。

P.S：为了确保您可以在此处查看完整代码：

//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);
    }
  }
}