Access vue method within vuex mapState

Question

I have an important task to do while data is computed within a vuex mapState. I need to call this vue method countAlerts every time data is changed; to do that the computed property needs to call that method but this scope has no vue methods when it is used insight vuex mapState.

export default {
  name: "Alerts",
  methods: {
    countAlerts(data, period) {
      /// DO SOMETHING, THEN RETURN DATA
      return data;
    }
  },
  computed: {
    ...mapState({
      foundation: state => state.insights.foundation,
      insights: state => {
        return state.insights.list.filter(al => {
          switch (state.insights.foundation.period) {
            case "daily":
               // ====>> NEED TO CALL METHOD HERE <<=====
              al = this.countAlerts(al, "daily");
              if (
                al.threeDayUp ||
                al.threeDayDown ||
                al.greatDayUp ||
                al.greatDayDown
              ) {
                return al;
              }
              break;
            ///  MORE CODE ABOVE
          }
        });
      }
    })
  }
};

Do not use arrow function, it will make scope limited and you can not access the this. Amade answered correctly. — Sang Dang
I have noticed that. I came from angular/typescript. I am very used to it... — calebeaires

Amade Amade · Accepted Answer · 2018-12-23T14:02:57

this is bound to the component's contex when you define computed props as functions.

From the docs:

// to access local state with `this`, a normal function must be used
countPlusLocalState (state) {
  return state.count + this.localCount
}

Access vue method within vuex mapState

1 Answers