Vue.js中“已安装”axios中的意外异步操作

Question

作为Vue.js的新手，我有一个需要从远程服务器获取配置文件数据的组件：

<template>

 <div v-if="token">
      {{profile}}
  </div>

</template>

<script>
import axios from 'axios';

export default {
  name: 'Profile',

  data () {
    return {
          profile: {},
    }

  },

  computed: {
    token () {
      return this.$store.getters.getToken; 
    },

    mounted () {
        return axios
        .get( this.BASE_URL + '/profile')
        .then( res => {
                    this.profile = res.data;
                    console.log('profile is:', res.data);

          })            
    },

  },

}
</script>

我跟着官方食谱中的Using Axios to Consume APIs但是得到了这些错误：

error: Unexpected asynchronous action in "mounted"  

  84 |     mounted () {
> 85 |         return axios
     |                ^

并且

error: Unexpected side effect in "mounted" computed property  
  86 |         .get( this.BASE_URL + '/profile')
  87 |         .then( res => {
> 88 |                     this.profile = res.data;
     |                     ^

如果我从安装omiit return，我也得到这个错误：

error: Expected to return a value in "mounted" computed property

真的很困惑。感谢您的提示以解决此问题。

Answer 1

安装应与计算的级别相同

<script>
import axios from 'axios';

export default {
  name: 'Profile',

  data() {
    return {
      profile: {},
    };
  },
  computed: {
    token() {
      return this.$store.getters.getToken;
    },
  },
  mounted() {
    axios.get(this.BASE_URL + '/profile').then(res => {
      this.profile = res.data;
      console.log('profile is:', res.data);
    });
  },
};
</script>