如何在使用 vue-resource 时使用 data(){} 而不是 mounted(){} 启动函数

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

您的第一个代码片段是正确的做法。

您无法使用 API 响应中的数据初始化 domains，因为它是一个异步操作，在组件已安装。您可能还想做其他事情，例如使用 loading 属性跟踪异步操作，您在请求期间将其设置为 true。

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

Answer 2

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

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

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

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

但是，可以找到一个名为 vue-async-computed 的可爱小模块 here。它通过提供 asyncComputed 属性解决了这个特定问题，并使代码真正干净！

如何在使用 vue-resource 时使用 data(){} 而不是 mounted(){} 启动函数

How to initiate a function using data(){} but not mounted(){} while using vue-resource

javascript

vue.js

vue-resource

vuejs2