在 Vue 中创建异步异议的最佳实践？

Question

早安，

我是 VueJS 的新手，我一直在努力学习并遵守有关创建对象并将它们传递给组件的最佳实践。我唯一接触过前端框架的是 Angular 1，所以我的问题可能反映了该范式的实践。

我见过的每个例子和文章都处理这样的对象：

<my-person id="eg1" :name="person.name" :age="person.age"></my-person>

var example1 = new Vue({
  el: '#eg1',
  data: {
    person: { name: 'john', age: '100' }
  }
})

这对我来说很有意义，但后来我开始思考，“如果我想从 API 加载这个人怎么办？”我应该将 API 调用逻辑移到服务中，但我应该从哪里调用该服务？

• 在数据中：{} 对象本身？
• 在 Vue 组件样板之前通过 Person 对象？
• 我是否可以进行 api 调用并通过 VueX 将其加载到存储中，然后传入该存储状态？

下面的例子突出了我的很多困惑。对于重要的示例，处理异步对象创建并随后将其传递给组件的最佳实践是什么？

<div id="eg2">
  <my-person :name="person.name" :age="person.age"></my-person>
  <!-- Is it an anti-pattern to just send a (possibly large) object in as a 
       prop? Or do you want to define it in the data of this view/component? -->
  <my-person :person="classPerson"></my-person>
  <my-person :person="apiPerson"></my-person>
  <my-person :person="instantiatedPerson"></my-person>
</div>

// What would instantiating a person out here mean for updating its state?
let person = new Person(api.getPerson())

var example2 = new Vue({
  el: '#eg2',
  data: {
    person: { name: 'john', age: 100 },   // Standard method.
    classPerson: new Person('john', 100), // What would instantiating a Person here mean for updating its state?
    apiPerson: api.getPerson(),           // Is it considered bad practice to make the api call here and have it return a Person?
    instantiatedPerson: person
  }
})

// ./models/person-model.js
export default class Person {
  constructor(name, age) {
    this.name = name
    this.age = age
  }
}

如果这个问题被涵盖了，我深表歉意，但我已经阅读了一堆文章和示例，但我真的找不到明确的答案，因为这在“现实世界”中是如何完成的。任何帮助或文章链接，将不胜感激。

谢谢。

Answer 1

我推荐阅读 Sarah Drasner https://css-tricks.com/methods-computed-and-watchers-in-vue-js/ 的Methods, Computed, and Watchers in Vue.js

来自文章：

使用数据来跟踪我们希望响应的特定属性的更改

Computed 属性允许我们定义一个与数据使用方式相同的属性，但也可以有一些缓存的自定义逻辑 基于其依赖关系。

方法：这些正是它们听起来可能的样子（是的，命名！）。它们是挂在对象上的函数——通常是 Vue 实例本身或 Vue 组件。

与 AngularJS 不同，在 Vue 中一切都可以存在于 $scope 上，状态和方法应该分开。在下面的示例中，this.getPerson() 是从 created 生命周期方法 https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram 调用的

<script>
export default {
  name: 'eg2',
  data() {
    return {
        person
    };
  },
  created() {
    this.getPerson() 
  },
  methods: {
        getPerson() {
            api.getPerson().then(response => this.person = response.data) 
        }
    }
};
</script>

或使用 Vuex

<script>
import { mapActions, mapState } from 'vuex';

export default {
  name: 'eg2',
  created() {
    this.getPerson() 
  },
  computed: {
    ...mapState(['person'])
  },
  methods: {
        ...mapActions(['getPerson']),
    }
};
</script>