Call a method in side component when vuex state changes

Question

I want to call a method inside component when vuex state changes in typescript/vue js.I can read the value for vuex state using getters inside template but dont know how to read the data inside component class.

I am reading the vuex state using progressBar method. i want to call loadList method when ever state changes from false to true. like this

if(progressBar  == true)
{
  this.loadList('')
}

here is my component class

<script lang="ts">
import { Options, Vue } from "vue-class-component";
import "@/assets/css/backroomStyle.css";
import { useStore } from "../../store";
import Backrooom from "../../service/Backrooom";
import Toaster from "../../helpers/Toaster";
import moment from "moment";
import PreviewReceipt from "../../components/PreviewReceipt.vue";
import EmployeeBackroom from "../../components/EmployeeBackroom.vue";
import AssocaiteBackroomPickup from "../../components/AssocaiteBackroomPickup.vue";
import { camelCase } from "lodash";

interface OrderItem {
  totalBill: number;
  invType: string;
}

@Options({
  components: {},
})
export default class OnProgress extends Vue {
  private store = useStore();
  private toast;
  private orderLists = {};
  private backroomService;

  created() {
    this.backroomService = new Backrooom();
    this.toast = new Toaster();
  }

  mounted() {
    const fetchDate = "";
    this.loadList(fetchDate);
  }

  //READING VUEX STATE RETURNS TRUE OR FALSE
  get progressBar() {
    return this.store.getters.getProgressBar;
  }
  

  loadList(fetchDate) {
    fetchDate = fetchDate.trim();
    this.backroomService.getProgressList(fetchDate).then((data) => {
     
      this.orderLists = data.order_list;

    
  }
}
</script>

Ian Ian · Accepted Answer · 2020-12-30T15:25:55

You can use the "watch" property to watch for vuex changes. Ex:

export default () {
  computed: {
    userCount () {
      // Or use a getter here, works fine either way
      return this.$store.users.length;
    }
  },
  watch: {
    userCount (newVal) {
      this.myFantasticFunc(newVal)
    }
  }
}

Call a method in side component when vuex state changes

1 Answers