Question

我有一个计算属性，只有在属性匹配时才会使用。因此，我正在调用获取数据asynchronous，以便仅在需要时才检索它。我尝试进行async调用以返回计算属性的数据时遇到问题。

以下是我所拥有的：

new Vue({
    el: "#formCompleteContainer",
    data: {
        form: {},
        components: []
    },
    computed: {
        employeeList: function () {
            var self = this;
            if (_.some(this.components, function (component) {
                return component.ComponentInfo.Type === 8
            })) {
                var employees = [];
                $.ajax({
                    url: "/Form/GetAllUsers",
                    type: "GET"
                }).done(function (results) {
                    employees = results;
                });

                return employees;
            } else {
                return [];
            }
        }
    }
});

我知道这不起作用，因为我在通话完成之前回来了。我已经了解了如何使用deferred对象，但我似乎无法弄清楚如何使用Vue来实现它。

Answer 1

这就是vue-async-computed的含义。它可以解决您退还的诺言并处理所有比赛条件。

import java.io.FileOutputStream;

import org.apache.poi.xslf.usermodel.*;
import org.apache.poi.sl.usermodel.*;

import java.awt.Color;

public class CreatePPTXSheetsDifferentBackground {

 public static void main(String[] args) throws Exception {

  XMLSlideShow slideShow = new XMLSlideShow();
  XSLFSlide slide = slideShow.createSlide();
  if (slide.getXmlObject().getCSld().getBg() == null) slide.getXmlObject().getCSld().addNewBg();
  slide.getBackground().setFillColor(Color.BLUE);
  slide = slideShow.createSlide();
  if (slide.getXmlObject().getCSld().getBg() == null) slide.getXmlObject().getCSld().addNewBg();
  slide.getBackground().setFillColor(Color.RED);

  FileOutputStream out = new FileOutputStream("CreatePPTXSheetsDifferentBackground.pptx");
  slideShow.write(out);
  out.close();
 }
}

Answer 2

对于您的用例，我认为计算属性不能实现目标。

我的解决方案：

创建一个数据属性作为一个'deferred'对象，
然后使用一只手表异步调用你的后端获取新数据，最后分配给deferred对象

如下面演示：

Vue.config.productionTip = false
app = new Vue({
  el: "#app",
  data: {
    product: "Boots",
    deferedProduct: ''
  },
  watch: {
    product: function (newVal, oldVal) {
      setTimeout(() => {
        this.deferedProduct = 'Cats in ' + newVal + '!'
      }, 1500)
    }
  },
  methods: {
    nextProduct: function () {
      this.product += 'a'
    }
  }
})

<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
<div id="app">
  <button @click="nextProduct()">Click Me!</button>
    <h2>{{product}}</h2>
    <h2>{{deferedProduct}}</h2>
</div>

Answer 3

在做了一些研究后，我走了另一条路。我同意Sphinx我不认为我想要达到的目标是使用计算属性。

相反，这就是我的目标：

new Vue({
    el: "#formCompleteContainer",
    data: {
        form: {},
        components: [],
        employees: []
    },
    methods: {
        getEmployees: function () {
            var self = this;
            if (_.some(this.components, function (component) {
               return component.ComponentInfo.Type === 8;
            })) {
                $.ajax({
                    url: "/Form/Form/GetAllUsers",
                    type: "GET"
                }).done(function (results) {
                    self.employees = results;
                });
            }
        }
    },
    created: function () {
        this.form = pageModel.Form;
        this.components = pageModel.Components;
    },
    mounted: function () {
        this.getEmployees();
    }
});

Answer 4

正如已经指出的，mounted和其他第三方解决方案都可以使用。

但是，将所需的Promise放在data属性中会带来更好的可读性和组件加载。然后使用Vue生命周期挂钩created，我们可以等待Promise用.then解析。

例如：

requestService.js ：

...
   async foo(){
      let myRequest = someRequest.createInstance()
      await myRequest.onReady()
      return myRequest.getSomePromise()
   } 
...

然后将服务import插入组件，并声明一个data道具：

myComponent.vue

...
   data: (){
      myPromiseLoc: null,
   }
...
   created: (){
      requestService.foo().then( result =>
      {
         this.myPromiseLoc = result
      }
   }
...

计算属性的异步调用 - Vue.js

4 个答案: