关于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 ;

    });

  },

执行结果为

created

memberData

getMemberCenterAction

我期望的是

created

getMemberCenterAction

memberData

有什么办法可以做到可以复用上面的代码吗？

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 ;    });  },