Vue js .bind does not work while passing callback to vuex store

Question

This works when I pass redirectCallback to vuex store:

  var router = this.$router;
  var redirectCallback = () => {
    return userApi.deleteContact(userId, contactId).then(res => {
      store.commit("modals/HIDE_DANGER_MODAL");
      if (!res) {
        // error occurred
        return store.commit("modals/SHOW_DRROR_MODAL", {
          modalTitle: "Failed",
          modalBody: "Couldn't delete contact"
        });
      }
      store.commit("modals/SET_CUSTOM_CLOSE_OPERATION", function() {
        router.replace("/contacts");
      });
      return store.commit("modals/SHOW_SUCCESS_MODAL", {
        modalTitle: "Success",
        modalBody: "Contact Deleted Successfully!"
      });
    });
  };

But If I do it this way, it does not work and I get error cannot read property .replace of undefined:

  var redirectCallback = () => {
    return userApi.deleteContact(userId, contactId).then(res => {
      store.commit("modals/HIDE_DANGER_MODAL");
      if (!res) {
        // error occurred
        return store.commit("modals/SHOW_DRROR_MODAL", {
          modalTitle: "Failed",
          modalBody: "Couldn't delete contact"
        });
      }
      store.commit("modals/SET_CUSTOM_CLOSE_OPERATION", function() {
        this.$router.replace("/contacts");
      });
      return store.commit("modals/SHOW_SUCCESS_MODAL", {
        modalTitle: "Success",
        modalBody: "Contact Deleted Successfully!"
      });
    });
  };

I have just used this.$router instead of a local variable in vue component method it does not work. Here is how I pass the callback to vuex store:

  store.commit(
    "modals/SET_DANGEROUS_OPERATION",
    redirectCallback.bind(this)
  );

And here is how I invoke the callback:

  await store.dispatch("modals/performDangerousOperation");

So in short, I just dispatch the "performDangerousOperation" which invokes the callback(promise) and then it shows another modal. That modal has a close button which fires the "performCustomCloseOperation"(that we set in the redirectCallback above).

I just wonder why does the .bind does not work here(due to which this.$router is not defined)?

Psidom Psidom · Accepted Answer · 2020-06-30T15:45:38

This is because the anonymous function creates another this which overrides this in redirectCallback:

  store.commit("modals/SET_CUSTOM_CLOSE_OPERATION", function() {
    this.$router.replace("/contacts");
  });

Change it to an arrow function should work:

  store.commit("modals/SET_CUSTOM_CLOSE_OPERATION", () => {
    this.$router.replace("/contacts");
  });

Vue js .bind does not work while passing callback to vuex store

1 Answers