vue.js - 计算属性需要等待异步数据

Question

export default {
  data() {
    return {
      projects: []
    }
  },
  mounted() {
    axios.get('...')
         .then(({ data } => this.projects = data)
  },
  computed: {
    personalProjects() {
          return this.projects.filter(...)
      },

      commercialProjects() {
          return this.projects.filter(...)
      }
  }
}

计算属性需要等待项目从服务器获取后才能设置数据。执行此操作的正确方法是什么？

我试过这个:

watch: {
      projects() {
          this.personalProjects = this.projects.filter(project => project.type === 'personal')
          this.commercialProjects = this.projects.filter(project => project.type === 'commercial')
      }
  },

但我收到一条错误消息:计算属性“personalProjects”已分配给但它没有 setter。

我应该在 data() 中设置 personalProjects 和 commercialProjects 吗？

Answer 1

您目前所做的是正确的做法。计算属性是 react 性的、派生的属性。每当数据请求更新 projects 时，它们都会响应式更新。

本质上，您的组件的逻辑从没有项目开始，[]，如果有人要求个人或商业项目，他们会得到正确的结果:两者都没有，[ ]。

但是，无论何时安装组件，它都会开始加载实际项目的过程，并且每当它完成时，projects 的整个依赖关系图将被响应地更新，这意味着 personalProjects 将提供正确的结果。