Vue.js 如何避免不同函数中的重复代码？

Question

我既不习惯Javascript也不习惯Vue.js。仍然通过做不同的事情来学习，我努力不在使用 Vue.js 的两个函数中使用重复的代码。我还没有想出如何解决这个问题。我有这个 button : <q-btn :style="{opacity: storeName.length==0 ? 0 : 1}" icon="close" @click="reset()"></q-btn> 这样输入值就会变空并重置所有数据。这就是我的目标。

<template>
  <script>
    methods: {
      reset() {
        this.storeName = '';

        // These codes below are exactly the same with getStores() function..
        let params = {
          ap_dates: [
            this.date,
            moment(this.date).add(1, 'days').format('YYYY-MM-DD'),
          ],
          ap: ['orderCount', 'orderHasReceiptCount'],
        };

        if (this.storeName.length > 0) {
          params.f = ['name,%,' + this.storeName];
        }
        this.$http
          .get(`${this.$store.getters.apiPath}/store`, { params: params })
          .then((res) => {
            // console.log(res);
            this.stores = res.data.data;

            for (const key in this.total) {
              this.total[key] = 0;
              if (res.data.meta.totalOrderCount.hasOwnProperty(key)) {
                this.total[key] = res.data.meta.totalOrderCount[key];
              }
            }
            this.$forceUpdate();
          })
          .catch((err) => console.error(err))
          .finally(() => {
            this.loading = false;
            this.init = true;
          });
      },
      getStores() {
        this.loading = true;

        let params = {
          ap_dates: [
            this.date,
            moment(this.date).add(1, 'days').format('YYYY-MM-DD'),
          ],
          ap: ['orderCount', 'orderHasReceiptCount'],
        };

        if (this.storeName.length > 0) {
          params.f = ['name,%,' + this.storeName];
        }
        this.$http
          .get(`${this.$store.getters.apiPath}/store`, { params: params })
          .then((res) => {
            this.stores = res.data.data;

            for (const key in this.total) {
              this.total[key] = 0;
              if (res.data.meta.totalOrderCount.hasOwnProperty(key)) {
                this.total[key] = res.data.meta.totalOrderCount[key];
              }
            }

            this.$forceUpdate();
          })
          .catch((err) => console.error(err))
          .finally(() => {
            this.loading = false;
            this.init = true;
          });
      },
    }
  </script>
</template>

你能告诉我应该怎么做吗？

Answer 1

我想做的是这个:

reset() {
      this.storeName = '';
      this.getStores();
},

Vue.js 如何避免不同函数中的重复代码？

How to avoid the duplicate codes in the different functions with Vue.js?

vue.js

quasar-framework