I need to trigger a method inside a component whenever the vuex state changes in TypeScript and Vue.js. While I can access the vuex state value using getters in the template, I am unsure how to access the data within the component class.
The vuex state is being accessed using the progressBar method. I want to invoke the loadList method whenever the state transitions from false to true, like this:
if(progressBar == true)
{
this.loadList('')
}
Below is the code for 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>