Vue.js中通知的变异

时间:2018-01-24 09:31:34

标签: vue.js action store mutation

我的应用程序中有一个通知商店。我可以加载所有通知并将一个通知标记为已读。我为每个案例写了一些动作和突变。最后一个操作是将所有通知标记为已读,但我正在努力为此编写一个变异(注释部分)。

const actions = {
  notifications(context) {
    document.client
      .get_notifications()
      .then(ca => {
        S_Helper.cmt_data(ca, "load_notifications", this);
      })
      .catch(error => {
        ClientAlert.std_fail_with_err(error);
      });
  },

  readNotification(id, params) {
    document.client
      .read_notification({ id, params })
      .then(ca => {
        if (ca.is_success()) {
          context.commit("mark_notification", id);
        } else {
          ClientAlert.std_fail();
        }
      })
      .catch(error => {
        ClientAlert.std_fail_with_err(error);
      });
  },
  readAllNotifications(context, params) {
    params = params || {};
    document.client
      .read_all_notifications(params)
      .then(ca => {
        if (ca.is_success()) {
          context.commit("mark_all_notifications", this);
        } else {
          ClientAlert.std_fail();
        }
      })
      .catch(error => {
        ClientAlert.std_fail_with_err(error);
      });
  }
};

const mutations = {
  load_notifications(context, data) {
    context.notifications = data;
  },
  mark_notification(state, id) {
    let new_data = state.notifications.map(function(element) {
      if (!!element.id && element.id === id) {
        element.viewed = true;
      }
      return element;
    });
    state.notifications = new_data;
  }
  //mark_all_notifications(context, data) {
  //}
};

1 个答案:

答案 0 :(得分:1)

  mark_all_notifications(state, data) {
    state.notifications = state.notifications.map(notification => {
      notification.viewed = true
      return notification
    })
  }

简单的map应该有用。