vue中mixins的使用方法和注意點---mixins第二篇（異步請求的情況）

問題tips：當mixins里面包含異步請求函數，而我們又需要在組件中使用該異步請求函數的返回值時，我們會取不到值，如下

1.mixins中代碼

export const myMixin = {
  data(){
    return {
      num: 1
    }
  },
  methods:{
    function_one(){
      new Promise( (resolve, reject) => {
        let a = 1;
        setTimeout( () => {
          resolve(a)
        }, 500 )

      }).then( res => {
        console.log( res , 'res');
        return res
      })
    }
  }
}

2.組件中的代碼

<template>
  <div class="app-container">
    <div class="main">
      這是main
    </div>
  </div>
</template>

<script>
import { myMixin } from "./mixins/index.js";
export default {
  mixins:[myMixin],
  mounted(){
    console.log(this.function_one(), 'main_function_one');

  }
}
</script>

<style scoped>
.main{
  font-size:28px;
  color:blue;
}
</style>

3.打印台輸出

總結：this.function_one()為undefine

 

解決方法：不要返回結果而是直接返回異步函數，在組件中調用異步函數，異步函數的then回調函數里面做數據處理

1.mixins中代碼

export const myMixin = {
  data(){
    return {
      num: 1
    }
  },
  methods:{
    async function_one(){
      let result = new Promise( (resolve, reject) => {
        let a = 1;
        setTimeout( () => {
          resolve(a)
        }, 500 )
      })
      return result
    }
  }
}

2.組件中的代碼

<template>
  <div class="app-container">
    <div class="main">
      這是main
    </div>
  </div>
</template>

<script>
import { myMixin } from "./mixins/index.js";
export default {
  mixins:[myMixin],
  mounted(){
    this.function_one().then( res => {
      console.log(res, 'main_function_one');
    } )


  }
}
</script>

<style scoped>
.main{
  font-size:28px;
  color:blue;
}
</style>

3.打印台輸出

 

 

參考---https://www.cnblogs.com/Ivy-s/p/10022636.html