typescript - 当 vuex 状态改变时调用侧组件中的方法

Question

当 vuex 状态在 typescript/vue js 中发生变化时，我想调用组件内部的方法。我可以使用模板内部的 getter 读取 vuex 状态的值，但不知道如何读取组件类内部的数据。

我正在使用 progressBar 方法读取 vuex 状态。当状态从假变为真时，我想调用 loadList 方法。像这样

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

这是我的组件类

<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>

标签： typescriptvue.jsvuex

Answer 1

你可以使用“watch”属性来观察 vuex 的变化。前任：

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