关于vue中使用mixins进行异步代码合并问题？

Question

现在有个需求，很多页面组件需要用到以下代码export default {  async created() {    console.log('created');    if (!store.state.memberCenterData) {      await store.dispatch('getMemberCenterAction');      console.log('getMemberCenterAction');    }  },};于是我通过mixin混合到了页面组件A  async created() {    console.log('memberData');    this.memberData = this.$store.state.memberCenterData.result.info;    this.$nextTick(() => {      this.wrapHeight = document.documentElement.clientHeight - this.$refs.list.$el.getBoundingClientRect().top ;    });  },执行结果为createdmemberDatagetMemberCenterAction我期望的是createdgetMemberCenterActionmemberData有什么办法可以做到可以复用上面的代码吗？

Answer 1

你不要mixins生命周期函数

export default {

  async mymethod() {

    console.log('created');

    if (!store.state.memberCenterData) {

      await store.dispatch('getMemberCenterAction');

      console.log('getMemberCenterAction');

    }

  },

};

async created() {

    await this.mymethod()

    this.$nextTick(() => {

      this.wrapHeight = document.documentElement.clientHeight - this.$refs.list.$el.getBoundingClientRect().top ;

    });

  },