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调用逻辑移到服务中，但是从哪里调用该服务呢？？

在数据中：{}对象本身？
通过Person对象在Vue组件样板之前？
我会调用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/

中的Vue.js中的方法，计算和观察程序

摘自文章：

使用数据跟踪对我们希望做出反应的特定属性的更改

计算属性允许我们定义一个属性，该属性的使用方式与数据相同，但也可以缓存一些自定义逻辑   根据其依赖性。

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

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

调用created

<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>

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

1 个答案: