如何在使用 vue-resource 时使用 data(){} 但不使用 mount(){} 来启动函数

Question

这可行，但我需要使用mounted(){} 来启动我认为可以避免但不确定如何避免的功能。

<script>
  export default {
    data () {
      return {
        domains: [],
      }
    },

    methods: {
      fetchDomains() {
        let _this = this;

        api._get({url: 'api/domains'})
          .then(function (response) {
            _this.domains = response.data;
          })
      }
    },

    mounted() {
      this.fetchDomains()
    }
  }
</script>

这段代码不起作用，但我喜欢做这样的事情。在data(){} 本身中启动函数。

<script>
  export default {
    data () {
      return {
        domains: this.fetchDomains(),
      }
    },

    methods: {
      fetchDomains() {
        let data = [];

        api._get({url: 'api/domains'})
          .then(function (response) {
            data = response.data;
          })

        return data
      }
    }
  }
</script>

提前致谢。

Answer 1

我可能稍微偏离了这个问题（因为它明确提到了data 属性），但我认为这可能会有所帮助。就个人而言，如果我想提供一些具有更复杂逻辑的数据，我会使用computed 属性。我认为这很棒，您可以在the docs 中阅读更多相关信息。这种情况下的问题是它不能完全按预期使用异步操作...

但是，有一个可爱的小模块叫做 vue-async-computed，可以在 here 找到。它通过提供asyncComputed 属性解决了这个特定问题，并保持代码非常干净！

Answer 2

我同意 Decade Moon 的观点，即您的第一种方法是更好的方法（尽管您可以使用 created 而不是 mounted）。

您的第二种方法不起作用的原因是您返回一个数组，然后用不同的数组替换局部变量的值。您需要做的是填充您返回的数组。

new Vue({
  el: '#app',
  data() {
    return {item: this.getItem()}
  },
  methods: {
    getItem() {
      let val = [];
      setTimeout(() => {
        const result = ['first','second','third'];
        val.push(...result);
      }, 800);
      return val;
    }
  }
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<div id="app">{{item}}</div>

Answer 3

您的第一个代码 sn-p 是正确的方法。

您无法使用来自 API 响应的数据初始化 domains，因为它是一个异步操作，在未来某个时间点（在组件安装之后）可能会或可能不会成功解决。您可能还想执行其他操作，例如使用在请求期间设置为 true 的 loading 属性跟踪异步操作。

您的组件最初将处于加载状态，还没有任何domains 数据，您需要考虑这一点。在此期间显示加载微调器或其他东西。