Vue中两个组件相似，代码重构

在Vue项目开发中，一种不良的开发习惯是，除了将某些工具方法抽取出来之外，所有的业务逻辑都堆积在.vue文件中，即使某两个.vue文件中有重复出现的代码。

可以考虑将这些重复的代码抽取到某个模块，即某个.js文件中。

// sett.js

/**
 * 某两个Vue组件中，有大约60%的代码是重复的，为了消除重复，特将重复出现的方法抽取到该模块。
 * 注意：那两个Vue中的data()里的变量，如果在两个页面都出现了，变量名称一定要一模一样！
 * 如果做不到，那么本文的重构方法不适合你！
 */
export default class Sett {
  /**
   * 在哪个.vue文件中import了该模块，vueObject就代表那个.vue对象
   */
  constructor(vueObject) {
    this.vueObject = vueObject;
  }
  
  querySettInfos(current){
    console.log('[sett.js]进入querySettInfos()');
    let vueObj = this.vueObject;

    // vueObj可以直接读取或修改.vue文件中的data数据
  }
  
  // 注意：方法之间没有逗号
  someMethod(){
  }

}

某个.vue文件：

<script>
import Sett from "@/module/sett";
export default {
    data() {
        return {
          sett: null,
        };
    },
    methods: {
        doQuery(page) {
          this.sett.querySettInfos(page);
        },
    },
    created() {
        this.sett = new Sett(this);
    },
    mounted() {
    }
};
</script>

其他.vue文件也类似，从而达到代码重用的目的。